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