vue学习总结之计算属性和监听器

1.计算属性

1.1介绍

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

• 数据可以进行逻辑处理，减少模板中计算逻辑
• 对计算属性中的数据进行监视
• 依赖固定的数据类型（响应式数据）
  计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性。默认只有get，如果需要set，要自己添加。另外set设置属性，并不是直接修改计算属性，而是修改它的依赖：
  

1.2计算属性 vs 普通属性

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

1.3计算属性 vs 方法

两者最主要的区别：computed 是可以缓存的，methods 不能缓存；只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存的计算结果，就不会多次执行。网上有种说法就是方法可以传参，而计算属性不能，其实并不准确，计算属性可以通过闭包来实现传参；但是计算属性一旦传参就不能对结果进行缓存，这也就和方法好像就没有什么区别了，而使用计算属性的目的之一就是它会缓存数据！这或许就是为啥官网上没有提计算属性可以传参的原因吧。

闭包函数：当一个函数的返回值是另外一个函数，而返回的那个函数如果调用了其父函数内部的其它变量，如果返回的这个函数在外部被执行，就产生了闭包。

2.侦听属性

2.1介绍

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性watch。Watch中可以执行任何逻辑，如函数节流、Ajax异步获取数据，甚至操作 DOM（不建议）。
常规用法如下：

节流函数：在短时间多次触发某个函数的场景下，对执行函数进行节流，节省无效浪费。（具体做法：例如在输入框中输入内容进行查找，在预定的时间内多次改变搜索框内容时，只对最后一次输入的结果进行请求。）

2.2深度监听

监听器还可以监听一个对象的属性变化，除了上述监听器的写法，还有可以直接写一个函数。
使用 watch 来监听数据变化的时候除了常用到的 handler 回调，其实还有两个参数，它们是：Deep、immediate ；

• handle:watch中需要具体执行的方法
• deep：需要监听的数据的深度，一般用来监听对象中某个属性的变化，,数组字符串一般不需要；
• immediate：在选项参数中指定 immediate: true，将立即以表达式的当前值触发回调；
  注意： 使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。
  

2.3总结

普通的watch:

数组的watch：深拷贝

对象的watch：

对象的具体属性的watch：

2.4解决监听的新旧数据一样的问题

如果想要得到差异内容，可以结合计算属性、序列化、反序列化生成新的对象，来避免此问题 。

3.对比

3.1监测的对象不同

• watch：监测的是属性值， 只要属性值发生变化，其都会触发执行回调函数来执行一系列操作；
• computed：监测的是依赖值，依赖值不变的情况下其会直接读取缓存进行复用，变化的情况下才会重新计算。

属性值：定义属性的特定的特征或参数；
依赖值：一个关系内部属性与属性之间的约束关系；

3.2是否可以执行异步任务

• 计算属性不能执行异步任务，计算属性必须同步执行。也就是说计算属性不能向服务器请求或者执行异步任务。
• 如果遇到异步任务，就交给侦听属性。

3.3适用场景

• 计算属性适合用在模板渲染中，某个值是依赖了其它的响应式对象甚至是计算属性计算而来的；
• 侦听属性适用于观测某个值的变化去完成一段复杂的业务逻辑。

3.4总之

• computed能做的，watch都能做，反之则不行
• 能用computed的尽量用computed