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 擅长处理的场景是一个数据受多个数据影响。
（完）