Vue响应式系统：依赖追踪与更新触发全流程

Vue响应式系统的核心在于依赖追踪（Track）与更新触发（Trigger）之间精妙的闭环协作：数据读取时仅在活跃副作用执行期间自动收集依赖，通过Proxy和数组方法重写实现细粒度、深度且按需的依赖记录；数据变更时则精准定位受影响的依赖集合，借助异步批处理调度更新，确保组件渲染、计算属性和侦听器高效、可靠地响应变化——这一切共同构成了Vue轻量、直观又强大的响应式基石。

Vue.js 的响应式核心在于依赖追踪（Track）与触发更新（Trigger）的闭环协作——数据被读取时自动收集依赖，被修改时精准通知相关依赖更新。

依赖收集（Track）：谁在什么时候记住了谁？

当组件渲染或计算属性求值时，会进入“依赖收集模式”。此时访问响应式数据（如 ref.value 或 reactive.obj.prop），其内部的 get 拦截器就会执行：

• 判断当前是否存在活跃的副作用（如 effect 或组件 render 函数），若存在，则将该副作用加入该响应式属性对应的依赖集合（Dep）中；
• 每个响应式对象的每个属性（或整个 ref）都维护一个独立的 Dep（本质是 Set），用于存储所有依赖它的副作用；
• 嵌套对象会逐层触发 get，实现深度依赖收集；数组通过重写 push/pop 等方法，在操作时主动触发依赖收集（如 length 变更也会被 track）。

触发更新（Trigger）：数据一变，谁该重新跑？

当响应式数据被赋值（set）或调用变更方法（如 array.push()）时，set 拦截器或重写方法会执行 trigger 流程：

• 根据当前操作的 key（如 'count'）找到对应属性的 Dep 集合；
• 遍历该 Dep 中所有已注册的副作用函数，并将其加入调度队列（queueJob）；
• Vue 使用异步批处理机制（微任务）确保同一 tick 内对同一副作用只触发一次，避免重复执行。

Effect 调度与组件更新的衔接

被 trigger 的副作用函数，通常是组件的 render 函数或用户定义的 watchEffect。它们被调度后：

• render effect 重新执行，生成新的虚拟 DOM；
• 新旧 VNode 进行 diff，仅更新真实 DOM 中变化的部分；
• computed 和 watch 内部也基于 effect 构建，因此同样享受 track/trigger 的统一响应式基础设施。

关键细节：为什么不是所有读取都会被收集？

Track 仅在“激活的 effect 执行期间”发生。例如：

• console.log(obj.count) 在全局执行不会收集依赖（无 active effect）；
• 条件语句中未执行的分支（如 v-if="false" 内的 obj.count）也不会被 track；
• 使用 toRaw 或 markRaw 包裹的对象绕过 proxy，自然不参与 track/trigger。

到这里，我们也就讲完了《Vue响应式系统：依赖追踪与更新触发全流程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！