vue计算属性computed与侦听器watch

一、计算属性computed

当其依赖属性的值发生变化是，这个属性会重新计算自动更新，并通不更新到dom树中
作用：

1. 减少模板中的计算逻辑
2. 进行数据缓存
3. 依赖固定的数据类型（响应式数据）

使用：

1. 在computed属性对象中定义计算属性的方法
2. 在页面中使用 {{方法名}} 来显示计算结果
3. 通过getter/setter实现属性数据的显示和监视

计算属性的不足：
计算属性中如果执行了大量的耗时操作，会带来一些性能问题 导致大量不必要的运算。

二、侦听器watch

作用

1. 比computed更加灵活，囊括所有computed的性能
2. watch中可以执行任何逻辑比如 ：函数节流、Ajax异步数据获取、甚至操作Dom
3. 依赖固定的数据类型

使用

1. 通过vm对象大大$watch()或watch配置来监视指定的属性
2. 当属性变化时，回调函数自动调用，在函数内部进行计算

三、总结

1. computed能做的 watch都可以做，反之则不行
2. 能使用computed的地方，优先使用computed
3. computed是计算一个新的属性，并将该属性挂载到vm上，而watch是监听已经存在且挂载到vm上的数据，所以用watch同样可以监听computed计算属性的变化（data，props同样适用）
4. computed的本质是一个惰性求值的观察者，具有缓存性，当依赖变化后，第一次访问computed属性，才会计算新的值，而watch这是当数据发生变化变回调用执行函数
5. computed多只用在一个值需要多个值计算得出的情况下，而watch适用于一个数据影响多个值的情况下。