Vue学习笔记之计算属性与侦听器用法


Posted in Javascript onDecember 07, 2019

本文实例讲述了Vue计算属性与侦听器用法。分享给大家供大家参考,具体如下:

vue之所以加载速度非常块,是因为在数据改变时,它并不是将所有组件都刷新,而是在重用代码的基础上对发生改变的地方进行渲染。同时,还得益于计算属性的使用:

1、计算属性

像绑定普通属性一样在模板中绑定计算属性。例如reverseName属性依赖于firstName和lastName,当firstName或lastName发生改变时,依赖于它的 reverseName 也会更新。

利用函数方法也可以实现类似的效果,不同的是计算属性是基于它们的依赖进行缓存的。只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 firstName 还没有发生改变,再次访问 reversedName 计算属性会立即返回之前的计算结果,而不必再次执行函数。相比之下,每当触发重新渲染时,调用方法将总会再次执行函数.

为什么需要缓存?假设我们有一个性能开销比较大的的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性 B 依赖于 A 。如果使用函数,每获得一次B就要调用一次函数进行计算,造成很大开销!

计算属性默认为get方法,也可以设定set方法,接收传入处理数据。例如传入originalName,set方法对其进行拆解并复制给firstName与lastName,并引起firstName与lastName改变,调用get()方法。

<div id="app">
    <p>{{originalName}}</p>
    <p>{{reverseName}}</p>
    <button @click="deal()">反转名字</button>
</div>
let vue=new Vue({
    el:'#app',
    data:{
      firstName:'',
      lastName:'',
      originalName:"super tory"
    },
    methods:{
      deal(){
        this.reverseName=this.originalName;
      }
    },
    computed:{            //计算属性钩子
      reverseName:{
        set(string){  //通过set方法对传入参数this.originalName进行操作
          let name=string.split(' ');
          this.firstName=name[1];
          this.lastName=name[0];
        },
        get(){      //通过get方法返回值
          return this.firstName+' '+this.lastName;
        }
      }
    }
});

2、侦听器watch

在Vue中提供一个钩子,侦听data中的某个变量是否改变,如果改变则执行响应函数。

<div id="app2">
  <input v-model="listen">
</div>
let vue2=new Vue({
  el:'#app2',
  data:{
    listen:''
  },
  watch:{      //定义侦听器钩子
    listen:function () {  //定义函数侦听listen的变化
      console.log("input内容发生改变");
    }
  }
});

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
JavaScript面向对象之体会[总结]
Nov 13 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
Aug 11 Javascript
5秒后跳转到另一个页面的js代码
Oct 12 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
jQuery实现点击查看大图并以弹框的形式居中
Aug 08 Javascript
JavaScript里 ==与===区别详解
Aug 16 Javascript
js 轮播效果实例分享
Dec 28 Javascript
详解在AngularJS的controller外部直接获取$scope
Jun 02 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
详解vue引入子组件方法
Feb 12 Javascript
你知道JavaScript Symbol类型怎么用吗
Jan 08 Javascript
简单了解Vue computed属性及watch区别
Jul 10 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 #Javascript
JQuery样式与属性设置方法分析
Dec 07 #jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 #jQuery
json解析大全 双引号、键值对不在一起的情况
Dec 06 #Javascript
js实现图片粘贴到网页
Dec 06 #Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 #Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
Dec 06 #Javascript
You might like
Zerg建筑一览
2020/03/14 星际争霸
php urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
js获得参数的getParameter使用示例
2014/02/26 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
使用yeoman构建angular应用的方法
2017/08/14 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
基于滚动条位置判断的简单实例
2017/12/14 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
利用nohup来开启python文件的方法
2019/01/14 Python
原装进口全世界:天猫国际
2016/08/03 全球购物
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
护理毕业生自我鉴定
2014/02/11 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
投资入股合作协议书
2014/10/28 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
详解Python生成器和基于生成器的协程
2021/06/03 Python
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang