Vue 的computed 和 watch 的区别
相关问题#
- computed 和 watch 的实现原理
- computed 和 watch 的适用场景
回答关键点#
响应变化 属性 侦听 computed 是模板表达式的声明式描述,会创建新的响应式数据。而 watch 是响应式数据的自定义侦听器,用于响应数据的变化。除此之外,computed 还具有可缓存,可依赖多个属性,getter 函数无副作用等特点。watch 则更适用于异步或开销大的操作。
知识点深入
1. 实现原理
依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值;
在了解 Vue 数据双向绑定的基础上,computed 等同于为属性设置 getter 函数(也可设置 setter),而 watch 等同于为属性的 setter 设置回调函数、监听深度 deep 及响应速度 immediate。下面简单讲解下两者的实现原理,具体细节可以参考源码。
1.1 computed 原理
主要分为四个阶段
- 初始化:为 computed 属性创建 lazy watcher(此处 watcher 指双向绑定中的监听器,下同)。
- 首次模板渲染:渲染 watcher 检测到 computed 属性时,会调用 computed 属性的 getter 方法,而 computed 属性的 getter 方法会调用依赖属性的 getter,从而形成链式调用,同时保存引用关系用于更新。取得计算结果后 lazy watcher 会将结果缓存,并返回给渲染 watcher 进行模板渲染。
- 多次模板渲染:直接取 lazy watcher 中的缓存值给到渲染 watcher 进行渲染。
- 依赖属性更新:根据首次模板渲染阶段构建的依赖关系向上通知 lazy watcher 进行重新计算,缓存计算结果并通知渲染 watcher 重新渲染更新页面。