Vue计算属性与effect依赖追踪解析

Vue的计算属性并非简单的响应式监听器，而是一套以惰性effect为核心的精密缓存机制：它在首次读取时才执行getter、动态精准收集运行时实际访问的依赖，并通过dirty标记实现延迟重算；依赖变化时不立即执行，仅标记为脏，在下次读取时才重新求值并更新依赖关系，从而兼顾性能与准确性；更巧妙的是，computed本身作为响应式数据源，可被上层effect（如组件渲染）无缝消费，形成多级响应链接——真正实现了“按需追踪、懒执行、自动缓存、动态更新”的响应式闭环。

Vue.js 的计算属性（computed）能自动响应依赖数据变化并缓存结果，其底层核心正是依赖追踪与副作用函数（effect）的联动机制。这不是简单的“监听+执行”，而是一套精细的响应式调度系统：当计算属性被访问时，它会主动“注册”自己所用到的响应式数据为依赖；当这些数据变化时，再触发对应计算逻辑的重新求值。

计算属性本质是一个带缓存的响应式 effect

Vue 中的 computed 并非独立于响应式系统之外，而是基于 effect 构建的封装。它内部会创建一个惰性（lazy）的副作用函数，并设置 dirty = true 标志。首次读取时才执行该 effect 得到值，同时收集依赖；后续读取若依赖未变，直接返回缓存值（value），跳过重新执行。

• 每个 computed 实例都持有一个私有 effect，该 effect 的 runner 就是计算函数本身
• 这个 effect 被标记为 lazy: true 和 computed: true，使其不立即执行，也不参与普通响应式更新队列
• 依赖的响应式属性（如 ref 或 reactive 中的字段）在 getter 执行过程中，通过 track() 记录当前 activeEffect（即该 computed effect）为其依赖

依赖收集发生在 getter 执行时

当你在 computed(() => obj.count + 1) 中访问 obj.count，其 get trap 会检测到当前存在活跃的 effect（即该 computed 的 runner），于是调用 track(obj, 'count', activeEffect)，把该 effect 加入 obj.count 对应的依赖集合（depsMap）中。

• 依赖收集是“被动触发”的：只有真正读取响应式属性，才会建立连接
• 若计算属性中存在条件分支（如 v ? a : b），只有实际执行到的分支路径上的响应式读取才会被收集
• 这意味着依赖关系是动态、精确的——不会因代码存在而收集，只因运行时执行而收集

响应式更新触发 dirty 置位与懒执行

当某个被依赖的响应式属性（如 obj.count）被修改，其 set trap 会调用 trigger(obj, 'count')，遍历所有依赖该 key 的 effects 并执行它们的 scheduler（如果存在）。对于 computed effect，scheduler 的默认行为是将自身标记为 dirty = true，而不是立刻重算。

• 标记 dirty 后，下次访问该 computed 的 .value 时，发现 dirty === true，才调用 runner 重新执行 getter
• 重新执行过程中再次进行依赖收集，可能更新依赖列表（例如上次走 if 分支，这次走 else，依赖的字段就不同了）
• 这保证了 computed 总是基于最新依赖关系求值，且避免了不必要的重复计算

effect 与 computed 的层级协作关系

一个 computed effect 可以被其他 effect（比如组件渲染函数）读取，此时它又作为“响应式数据源”参与依赖链。例如：const double = computed(() => count.value * 2)，在模板中使用 {{ double }}，渲染 effect 就会依赖 double 这个 ref-like 对象，而 double 内部又依赖 count ——形成两级响应链接。

• 上层 effect（如 render）通过 track 收集的是 double 这个 computed ref 的依赖（即它的 .value getter）
• 下层 computed effect 在自己的 runner 中收集 count 的依赖
• 当 count 变化 → 触发 computed effect 的 dirty → 下次 render 读取 double.value 时重算 → render effect 拿到新值并更新视图

今天关于《Vue计算属性与effect依赖追踪解析》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！