Vue计算属性与侦听器

Vue计算属性与Vue侦听器比较

Vue 计算属性就是通过其他变量计算得到另一个属性。Vue 计算属性具有缓存功能。Vue 计算属性是基于它们的依赖进行缓存的。Vue计算属性只有在它的相关依赖发生改变时才会重新求值。

Vue 侦听器 watch 是侦听一个特定的值，当该值变化时执行特定的函数。

Vue计算属性与Vue侦听器比较

属性名

• 属性名 computed 是计算属性，也就是依赖其它的属性计算所得出最后的值。
• 属性名 watch 时侦听器，也就是是去监听一个值的变化，然后执行相对应的函数。

实现

• 在实现上，computed 的值在 getter 执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed 的值时才会重新调用对应的 getter 来计算。
• 在实现上 watch 在每次监听的值变化时，都会执行回调。
• 其实从这一点来看，都是在依赖的值变化之后，去执行回调。

回调

• Vue watch 的回调里面会传入监听属性的新旧值，通过这两个值可以做一些特定的操作。
• Vue computed 通常就是简单的计算。

原理

• Vue watch 和 Vue computed 并没有哪个更底层。
• Vue watch 内部调用的是 vm.$watch，它们的共同之处就是每个定义的属性都单独建立了一个 Watcher 对象。

Vue计算属性与Vue侦听器比较总结

如果一个数据依赖于其他数据，那么把这个数据设计为 computed 的。

如果你需要在某个数据变化时做一些事情，使用 watch 来观察这个数据变化。watch 属性强调自身值得改变前后的动作，所以才有回调 func(newVal,oldVal) 。

Vue computed 是用 data 已经申明的变量可以计算出来的另一个变量用来渲染页面比较合适方便。而 Vue watch 适合监听某个 data 中的变量来操作一些逻辑行为比较合适，比如监听某个变量改变然后发起异步请求。

很多功能本来就很多属性都可以用，只不过有更适合的。如果一个值依赖多个属性（多对一），用 computed 肯定是更加方便的。如果一个值变化后会引起一系列操作，或者一个值变化会引起一系列值的变化（一对多），用 watch 更加方便一些。