computed 和 watch

computed 和 watch 区别：

• computed 是计算一个新的属性，并将该属性挂载到 vm（Vue 实例）上，而 watch 是监听已经存在且已挂载到 vm 上的数据，所以用 watch 同样可以监听 computed 计算属性的变化（其它还有 data、props）
• computed 本质是一个惰性求值的观察者，具有缓存性，只有当依赖变化后，第一次访问 computed 属性，才会计算新的值，而 watch 则是当数据发生变化便会调用执行函数
• 从使用场景上说，computed 适用一个数据被多个数据影响，而 watch 适用一个数据影响多个数据；

computed原理：

image.png

1.初始化 data 和 computed，分别代理其 set 和 get 方法，对 data 中的所有属性生成唯一的 dep 实例
2.对 computed 中的 属性生成唯一的 watcher，并保存在 vm._computedWatchers 中
3.访问计算属性时，设置 Dep.target 指向 计算属性的 watcher，调用该属性具体方法
4.方法中访问 data 的属性，即会调用 data 属性的 get 方法，将 data 属性的 dep 加入到 计算属性的 watcher ， 同时该 dep 中的 subs 添加这个 watcher
5.设置 data 的这个属性时，调用该属性代理的 set 方法，触发 dep 的 notify 方法
6.因为时 computed 属性，只是将 watcher 中的 dirty 设置为 true
7.最后，访问计算属性的 get 方法时，得知该属性的 watcher.dirty 为 true，则调用 watcher.evaluate() 方法获取新的值
综合以上：也可以解释了为什么有些时候当computed没有被访问（或者没有被模板依赖），当修改了this.data值后，通过vue-tools发现其computed中的值没有变化的原因，因为没有触发到其get方法。
具体实现：

watch原理：

具体实现：

参考：
https://www.jianshu.com/p/8861c88c6d27
https://blog.csdn.net/sinat_17775997/article/details/82682972
https://blog.csdn.net/qq_38211541/article/details/109119712
https://www.jianshu.com/p/f66fcb84a975
https://www.jianshu.com/p/a072811fb529
https://zhuanlan.zhihu.com/p/41512432
https://blog.csdn.net/sinat_17775997/article/details/82682972