Vue 中 computed 和 watch 的区别

1、computed - 计算属性

• computed 是依赖 Vue 的 options 中的 data 内部属性，计算出一个新的值的，可以当作属性直接用，但是其实为函数。
• computed 在使用的过程中不需要加 () 。Vue 会自动去读取其函数的返回值。
• computed 会根据依赖进行自动缓存。如果依赖的 data 数据不变，computed 就不会重新计算。

2、watch - 监听

• watch 是用来 监听 属性变化的，当属性变化后就会调用 watch 属性内对应的函数。
• watch 有一个 immediate 属性，表示是否对 数据第一次渲染 进行监听，执行对应的 watch 函数。
• watch 有一个 deep 属性，表示如果要监听一个对象类型的 data 变化时，是否要监听该 data 内部属性的变化。
• 除了 watch 选项外还可以使用命令式的 vm.$watch，Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

3、总结：

• 1、如果一个数据依赖于其他数据，那么把这个数据设计为 computed 的。
• 2、如果你需要在某个数据变化时做一些事情，使用 watch 来观察这个数据变化。
• 3、computed 主要用于对同步数据的处理，watch 则主要用于观测某个值的变化，$nextTick() 可以了解一下。