第三章|响应式系统
先区分 ref 与 reactive 保存和追踪的对象,再用依赖收集与代理操作解释更新。随后分开处理派生值、侦听副作用和调度时机,继续学习解构、作用域、集合及调试。
阅读前需要什么
需要前两章的状态绑定、组件输入与事件,以及 JavaScript 的对象引用和函数调用。Proxy 与 Reflect 在本章正式展开,不要求先阅读框架源码。异步侦听需要 Promise 与 async/await。
这一章怎样连起来
读取建立依赖,写入触发相关工作,调度决定何时执行。computed 维护派生值,侦听器执行外部副作用;解构与集合改变读取方式,作用域管理一组副作用的结束。先分清这些职责,再通过调试观察哪一步未符合预期。
阅读顺序
- ref 与 reactive
- track / trigger
- Proxy 与 Reflect
- computed
- 侦听器
- 调度器与 flush
- 响应式解构
- effectScope
- 数组、Map 与 Set
- Vue 2 响应式(维护回访)
- 调试响应式
标注“维护回访”的篇目用于比较旧项目行为。首次学习主线可以暂缓,具备对应前置后再读;它们保留在实际编号位置,便于从正文和侧栏定位。
读完后能做什么
对“值变了却没更新”的例子依次记录源值、读取入口和重新执行时机;对异步侦听改变两次请求的完成顺序,检查哪轮结果仍有资格写回。派生值、外部副作用和 DOM 更新要分别观察,不能只凭最后一张页面判断。
先独立完成各篇练习,再对照本章答案。接着进入第四章|Composition API 与逻辑复用。