Vue中的计算属性和侦听器

一、计算属性（computed）

1. 作用

减少模板中的计算逻辑，进行数据缓存。

2. 使用

（1）在computed属性对象中定义计算属性的方法。

（2）在页面中使用{{方法名}}来显示计算的结果。

（3）通过getter/setter实现对属性数据的显示和监视。

二、侦听器（watch）

1. 作用

watch中可以执行任何逻辑，比如：函数节流、Ajax异步数据获取、甚至操作DOM。

2. 使用

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

三、总结

• computed能做的，watch都能做，反之则不行。
• 能用computed的地方，尽可能使用computed。
• computed 是计算一个新的属性，并将该属性挂载到 vm（Vue 实例）上，而 watch 是监听已经存在且已挂载到 vm 上的数据，所以用 watch 同样可以监听 computed 计算属性的变化（其它还有 data、props）。
• computed 本质是一个惰性求值的观察者，具有缓存性，只有当依赖变化后，第一次访问 computed 属性，才会计算新的值，而 watch 则是当数据发生变化便会调用执行函数。
• 从使用场景上说，computed 适用一个数据被多个数据影响，而 watch 适用一个数据影响多个数据即当需要在数据变化时执行异步或开销较大的操作时。