本文是基于 Vue.js 设计与实现 这本书的学习笔记,主要是对 Vue3 的响应式原理进行分析和实现。
响应式原理是 Vue3 的核心,也是 Vue3 的灵魂所在。Vue3 的响应式原理是基于 ES6 的 Proxy 实现的,相比 Vue2 的 Object.defineProperty,Proxy 更加强大,更加灵活,也更加易用。
Vue3 响应式原理的核心难点有以下几个:
- 如何正确设计保存操作对象(obj)、操作对象具体属性(key)、具体的副作用函数(effectFn)
- 如何消除以前遗留的副作用函数对 分支切换 造成的影响
- 如何正确处理嵌套的副作用函数,即 副作用函数内部调用副作用函数
- 如何避免无限递归循环,即如何正确处理 既会读取属性的值,又会设置该属性的值的副作用函数
- 如何让用户自行控制副作用函数的执行时机
- 实现 Vue3 中的 computed
- 实现 Vue3 中的 watch
接下来让我们一个一个地来分析并解决这些问题。