详解Vue计算属性和侦听属性

计算属性

1.介绍

计算属性是自动监听依赖值的变化，从而动态返回内容，监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些事情。它有以下几个特点：

数据可以进行逻辑处理，减少模板中计算逻辑。

对计算属性中的数据进行监视

依赖固定的数据类型（响应式数据）

计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性。默认只有get，如果需要set，要自己添加。另外set设置属性，并不是直接修改计算属性，而是修改它的依赖。

computed: {  fullName: {    // getter    get:function() {returnthis.firstName +' '+ this.lastName    },    // setterset:function(newValue) {      //this.fullName = newValue 这种写法会报错      var names = newValue.split(' ')      this.firstName = names[0]//对它的依赖进行赋值      this.lastName = names[names.length - 1]    }  }}复制代码

现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

2.计算属性 vs 普通属性

可以像绑定普通属性一样在模板中绑定计算属性，在定义上有区别：计算属性的属性值必须是一个函数。

data:{ //普通属性  msg:'浪里行舟',},computed:{ //计算属性  msg2:function(){ //该函数必须有返回值，用来获取属性，称为get函数return'浪里行舟';  },  reverseMsg:function(){  //可以包含逻辑处理操作，同时reverseMsg依赖于msg,一旦msg发生变化，reverseMsg也会跟着变化returnthis.msg.split(' ').reverse().join(' '); }}复制代码

3.计算属性 vs 方法

两者最主要的区别：computed 是可以缓存的，methods 不能缓存；**只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存的计算结果，不会多次执行。**网上有种说法就是方法可以传参，而计算属性不能，其实并不准确，计算属性可以通过闭包来实现传参：

:data="closure(item, itemName, blablaParams)"computed: {closure() {returnfunction(a, b, c) {        /**dosomething */returndata    } }}

作者：浪里行舟

链接：https://juejin.im/post/5d01a81d51882559ef78e498

来源：掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。