Skip to content

第三章|响应式系统 ​

先区分 ref 与 reactive 保存和追踪的对象,再用依赖收集与代理操作解释更新。随后分开处理派生值、侦听副作用和调度时机,继续学习解构、作用域、集合及调试。

阅读前需要什么 ​

需要前两章的状态绑定、组件输入与事件,以及 JavaScript 的对象引用和函数调用。Proxy 与 Reflect 在本章正式展开,不要求先阅读框架源码。异步侦听需要 Promise 与 async/await。

这一章怎样连起来 ​

读取建立依赖,写入触发相关工作,调度决定何时执行。computed 维护派生值,侦听器执行外部副作用;解构与集合改变读取方式,作用域管理一组副作用的结束。先分清这些职责,再通过调试观察哪一步未符合预期。

阅读顺序 ​

  1. ref 与 reactive
  2. track / trigger
  3. Proxy 与 Reflect
  4. computed
  5. 侦听器
  6. 调度器与 flush
  7. 响应式解构
  8. effectScope
  9. 数组、Map 与 Set
  10. Vue 2 响应式(维护回访)
  11. 调试响应式

标注“维护回访”的篇目用于比较旧项目行为。首次学习主线可以暂缓,具备对应前置后再读;它们保留在实际编号位置,便于从正文和侧栏定位。

读完后能做什么 ​

对“值变了却没更新”的例子依次记录源值、读取入口和重新执行时机;对异步侦听改变两次请求的完成顺序,检查哪轮结果仍有资格写回。派生值、外部副作用和 DOM 更新要分别观察,不能只凭最后一张页面判断。

先独立完成各篇练习,再对照本章答案。接着进入第四章|Composition API 与逻辑复用。

用心记录每一步成长