Vue的computed和watch

compute是模版表达式的声明式描述，会创建新的响应式数据
watch是数据的监听器，用于响应数据变化。
compute具有缓存的功能，可依赖多个属性，getter无副作用的特点。
watch更适用于异步或开销大的操作。

computed的实现

computed等同于给属性设置getter函数（也可设置setter）
而watch是为属性的setter设置回调函数、深度监听deep及响应速度immediate

1.初始化：为computed创建Lazy watcher
2.首次模版渲染：渲染watcher检测到computed属性时，会调用conputed的getter方法，而computed的getter方法会调用依赖属性的getter，形成链式的调用。同时会保存引用关系。取得计算结果后lazy watcher会将结果缓存，并返回渲染watcher进行模版渲染。

这也是computed能缓存的原因，只要缓存的引用没更新，就不会进行重新进行计算

3.多次模板渲染：直接获取lazy watcher的值进行渲染。
4.依赖属性更新：根据首次模版渲染阶段构建的依赖关系，通知lazy watcher进行重新计算，缓存计算结果并通知渲染watcher进行渲染。

watch的原理

watch本质上就是为每个属性的setter添加watch监听。
当被监听的属性更新时，调用传入回调。
当watch配置deep时候，会对对象的每一个属性都增加watch。
当watch配置immediate时候，会在created的时候立即进行计算。

适用场景

computed：需要处理复杂模板逻辑表达式的时候
watch：需要执行异步，或者开销较大的操作。

watch 的使用场景是可以覆盖computed的，但是我们在使用时尽量优先使用computed，如果computed无法满足再考虑watch，因为在相同的场景下，watch的代码量和所需要的开销都会比computed大。