Vue 响应式系统依赖收集怎么实现？一文讲透原理

Vue的响应式系统依赖收集是其“精准更新”能力的核心基石，它通过Observer、Dep和Watcher三者协同，在数据被读取的瞬间（而非定义或修改时）动态记录“谁在关注谁”，就像图书馆自动登记借阅者一样，确保数据变化时仅通知真正依赖它的组件、计算属性或侦听器，避免全量重绘或更新遗漏；文章深入剖析了这一机制的运行逻辑、典型场景、常见陷阱及后续派发更新的完整闭环，彻底讲透Vue如何从“蒙眼刷新”进化为“指哪打哪”的智能响应。

依赖收集，说白了就是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学习网公众号，带你了解更多关于的知识点！