Vue 的 watch 和 computed 有什么关系和区别？

Vue 的 watch 和 computed 有什么关系和区别？

本文写于 2020 年 7 月 28 日

“computed 是计算属性”，请牢记这句话。

很多时候 computed 看上去就和一个方法一样，但是实际上它是「属性」。

computed 会根据它所依赖的数据动态显示新的计算结果。并且这个计算结果会被缓存，只有在其依赖的属性值改变之后，下一次再去获取 computed 的值时才会重新调用对应的 getter 来计算。

我们为什么需要 computed？

我们可以在 template 模板中的 {{ }} 中写上任何 JS 的计算，为何需要 computed？

当然是为了好维护项目啦。

在模版中放入太多声明式的逻辑会让模板过重，尤其当在页面中使用大量复杂的逻辑表达式处理数据时，会对页面的可维护性造成很大的影响。

computed 的设计初衷正是用于解决此类问题。

但是我们经常会用到 watch 语法，它是用来监听数据变化的。

例如：

a: function(val) {
  this.b = a + val;
}

这是啥意思呢，就是当 data 中的 a 变量变化时，我们获取到新的值，将新值作为 val 参数传入函数，然后进行一系列操作。

Vue 在文档中的“计算属性 vs 侦听属性”一节中只是短短提了一下，有时候 computed 会比 watch 更高效。

而我的理解是：

• 计算属性是由 data 中的已知值，得到的一个新值。这个新值只会根据已知值的变化而变化，其他不相关的数据的变化不会影响该新值；
• 计算属性不在 data 中，计算属性新值的相关已知值在 data 中。

也就是说计算属性 computed 是：别人变化影响我自己。

而侦听属性呢？

• 监听 data 中数据的变化；
• 监听的数据就是 data 中的已知值。

也就是说侦听属性 watch 是：我的变化影响别人。

那么总结一下，watch 擅长处理的场景是一个数据影响多个数据；computed 擅长处理的场景是一个数据受多个数据影响。

（完）