第 2 章 响应式系统：谁在读数据

第 2 章 · 响应式系统：谁在读数据

章节摘要：渲染管线的第一站。响应式系统要解决的核心问题是"数据变了之后，如何精确通知所有依赖它的视图位置"。本章从 Object.defineProperty 到 Proxy，把依赖收集与派发更新的机制讲成可运行的代码，再顺着同一套机制解释计算属性的缓存与侦听器的副作用。

学习目标

阅读完本章，你应当能够：

1. 说清依赖收集的两要素： getter 里记录读者、setter 里通知读者；
2. 解释 Vue 2 为什么无法侦测对象新增属性与数组索引赋值，以及各自的补丁方案；
3. 对比 Vue 2 defineProperty 与 Vue 3 Proxy 的能力边界；
4. 解释计算属性缓存的实现原理，并在它与方法、侦听器之间正确选型；
5. 描述异步批量更新的时序，解释 nextTick 的存在理由。

核心概念速览

响应式的全部秘密一句话：读我的时候记下你是谁，改我的时候我叫醒你们。

子章节导航

2.1 响应式原理与依赖收集

defineProperty 与 Proxy 两代实现、Dep 与 Watcher 的关系、Vue 2 的两个响应式盲区及 set 与数组方法补丁。

2.2 计算属性与侦听器

派生值与副作用两种需求的正解，计算属性缓存机制、侦听器适用场景与三者的选型决策。

子章节之间的逻辑关系

第一节打地基（追踪机制本身），第二节建楼层（computed 与 watch 都是构建在依赖追踪之上的 Watcher 变体）。跳过第一节，第二节的所有结论都会退化为死记硬背。

依赖收集机制 ──┬── 渲染 Watcher ──→ 视图更新
               ├── 计算 Watcher ──→ 派生值（带缓存）
               └── 侦听 Watcher ──→ 副作用（请求、动画）
​

前置知识与后续延伸

• 前置：第 1 章的数据驱动直觉；JavaScript 属性描述符的基础概念（本节会现场补）；
• 为后续铺路：本章的"属性级追踪"直接决定第 4 章 patch 的最小更新范围，也是第 10 章 Composition API 一切响应式工具函数的基座。

多啰嗦一句学习策略：这一章是全册最值得慢读的地方。后面讲组件、讲状态管理、讲性能，本质都在把本章机制当作已知前提使用；依赖收集的模型一旦真正建立，你遇到的大部分"视图不更新"类 bug 会从玄学变成可推导的因果链。反过来，跳过本章直奔后面的章节，也能把项目做出来，但排错时的体验会明显不同——这是很多自学者的共同教训。