Vue 响应式系统如何收集依赖？一文讲透底层原理

Vue响应式系统的核心秘密在于“依赖收集”——它并非主动扫描，而是在你读取响应式数据的瞬间，悄然记下当前正在执行的组件、计算属性或侦听器（即Watcher），就像图书馆精准登记谁借了哪本书；这一过程依托Observer（为数据添加监听）、Dep（每个属性背后的“订阅小本子”）和Watcher（代表各类观察任务）三者协同完成，确保数据变化时只通知真正依赖它的部分，从而实现毫秒级的精准更新，彻底告别全量重绘或漏更的低效与风险。

依赖收集，说白了就是Vue 记住“谁在看这个数据”的过程。它不是主动去查，而是在你读取数据的那一刻，悄悄把正在干活的组件（或计算属性、侦听器）记下来——就像图书馆借书登记一样，谁翻了哪本书，系统就记一笔。

为什么需要收集？不收集会怎样？

如果没有依赖收集，Vue 就像蒙着眼睛干活：数据变了，但它不知道该通知谁更新。比如一个 {{ user.name }} 在模板里用了三次，分布在三个不同组件中，Vue 必须知道这三处都依赖 user.name，改了名字时才能精准刷新它们，而不是全页面重绘或漏掉某一处。

关键点：收集只发生在“读取时”（getter 触发），不是定义时，也不是修改时。

收集是怎么发生的？三步走清清楚楚

整个过程围绕三个核心角色协同工作：

• Observer：负责给数据对象“装监控”，用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）把每个属性变成可监听的；
• Dep（依赖收集器）：每个响应式属性背后都有一个 Dep 实例，它像个“小本子”，专门记录哪些 Watcher 关注了自己；
• Watcher：代表一个“观察者任务”，比如组件渲染函数、计算属性的 getter、watch 回调。它在执行过程中会读取响应式数据，从而触发 getter → 进而把自己写进对应属性的 Dep 小本子里。

举个简化的例子：

谁在什么时候被收集？常见场景还原

依赖收集不是一次性的，而是按需、动态发生的：

• 模板插值：{{ count }} 渲染时读取 count，组件 Watcher 被收集；
• 计算属性：computed: { fullName() { return this.firstName + ' ' + this.lastName } }，首次求值时，firstName 和 lastName 的 getter 都会被触发，各自 Dep 记下这个计算属性的 Watcher；
• watch 侦听器：watch: { age(newVal) { ... } }，内部会新建一个 Watcher 去读取 age，从而完成收集；
• 不触发收集的情况：直接访问未声明在 data 或 setup() 中的属性、使用 Object.keys() 遍历响应式对象（不会触发 getter）、对数组用 arr[10] = x（Vue 2 不劫持索引赋值）。

收集完之后，怎么用？

收集只是第一步。当后续你改 message = 'hi'，setter 被触发 → 找到 message 对应的 Dep → 遍历它的订阅列表 → 逐个调用每个 Watcher 的 update() 方法 → 组件重新渲染、计算属性重新求值、watch 回调执行……整条链路就跑通了。

一句话收尾：依赖收集是 Vue 实现“精准更新”的地基——它让框架从“盲目刷新”变成“指哪打哪”。

今天关于《Vue 响应式系统如何收集依赖？一文讲透底层原理》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！