vue computed和watch

computed 与 watch

面试题

• computed 与 watch的区别
• computed 与 watch的原理
• computed的优缺点
• Vue中computed和data里的值的联系，computed的特点以及响应式变化
• Vue computed 计算属性如何传递参数？ --返回一个函数

computed的实现原理

计算属性：根据已有的属性生成新的属性

计算属性函数是通过函数将结果作为计算属性的值，把该计算属性挂在vm上，在模板中不能直接调用函数。计算属性的结果会被缓存，初始化时调用生成初始值，只有计算所依赖的数据发生变化才会重新计算。

那么如何知道计算属性的返回值是否发生了变化？

• 当dirty=true时依赖的数据发生变化说明需要重新计算计算属性的返回值
• 当dirty=false时说明计算属性的值没有变，不需要重新计算

当计算属性中的内容发生变化后，计算属性的Watcher与组件的Watcher都会得到通知。
计算属性的Watcher会将自己的dirty属性设置为true，组件的Watcher也会收到通知，从而执行render函数进行重新渲染操作，重新读取计算属性的值，此时计算属性的Wather已经把自己的dirty属性设置为true，所以会重新计算计算属性的值。

computed的优缺点

computed的特点:性能提升-确保了必要时才会进行计算

• 缓存结果：只有依赖项变化的时候才会重新计算，否则复用上一次计算的结果。
• 惰性求值：只有在真正读取它的 value 时，才会进行计算求值。

惰性求值也会带来一个缺点：计算属性的返回结果，只有在对它进行计算后才会知道。
影响性能的computed特征

• 一个计算简单的 computed，通常频繁触发计算，并且返回值通常变化不大，比如上面的 boolean 类型
• 另一个计算开销大的 computed，依赖这个廉价的 computed
  案例

watch的原理

watch的属性：可以监视data和computed里的已有属性

vue实例将会在实例化时调用vm.$watch()遍历watch对象的每一个属性，vm.$watch实际上是对Watcher的一种封装。

1.执行new Watcher时，会判断用户是否使用了immediate参数，如果使用了立即执行一次回调
2.Dep会记录数据发生变化时，需要通知哪些Watcher，而Watcher中也会记录自己订阅了谁，会被哪些Dep通知。
3.返回一个取消观察数据的函数，当Watcher不想继续订阅这些Dep时，循环自己的记录订阅列表来通知Dep将自己移除。

deep参数的实现原理
Watcher像监听某个数据，就会触发某个数据收集依赖的逻辑，将自己收集进去。然后当它发生变化时，就会通知Watcher。实现思路是，除了要触发当前这个被监听数据的收集依赖逻辑外，还要把当前监听的这个值在内的所有子值都触发一遍收集依赖逻辑。这样就可以实现当前的依赖的所有子数据发生变化时，通知当前的Watcher了。

区别

-	computed	watch
意图	根据已有属性计算出新的属性	监视已有属性
写法	conputed中的函数必须将新的属性用return返回	watch中的函数不是必须要用return
功能	1.初始化时调用 2.计算所依赖的数据发生变化	1.默认第一次加载不做监听,可以通过设置immediate让初始化时调用 2.监控数据发生变化时调用
是否支持异步	不支持异步，当computed内有异步操作是无法监听到数据变化的	√
是否有缓存	√ 页面重新渲染，值不变时，会直接返回之前的计算结果，不会重新计算	× 没有缓存，页面重新渲染时，值不改变时也会执行

如果一个值依赖多个属性（多对一），用computed肯定是更加方便的。
如果一个值变化后会引起一系列操作，或者一个值变化会引起一系列值的变化（一对多），用watch更加方便一些。

watch和computed的执行顺序

1.如果watch没有设置immediate
初始化时
beforeMount -> computed -> mounted
修改watch和computed共同的依赖属性
watch->beforeUpdate->computed->updated

2.如果watch设置了immediate
初始化时
watch->created->beforeMount->computed->mounted
如果监听了计算属性的值，那么watch监听的计算属性会先执行
修改watch和computed共同的依赖属性
methods(如果触发了)->watch->beforeUpdate->computed->updated