怎么说呢，

Vue 3.4 动态依赖管理演进

前言

在 Vue 3 的早期版本中。动态依赖收集的性能通过位运算进行了调整，但该方案存在层级限制等不足。因为 Vue 3.4 的发布，采用了版本化的方式来进一步提高动态依赖的执行效率。本篇文章将详细讲解 Vue 通过版本化实现动态依赖调整的过程。

什么是动态依赖

先回顾一下“动态依赖”概念：动态依赖指副作用函数中使用到的响应式数据会随程序状态变化而改变。例如的观点是，

const state = reactive
effect => {
if {
// 依赖 state.a
console.log;} else {
// 依赖 state.b
console.log;}
})，怎么说呢，state.flag = false;state.a = '小前端';

至于运行结果为，

掘金签约作者
Cobyte
Cobyte

从中能看出来。当 state.flag 为 true 时副作用已不再与 state.a 有关，但旧的依赖仍然保留，导致不必要的触发。

1. 初始状态
   • 说到已收集，state.flag、state.a
   • 从未收集来看，state.b
2. Status changed
   • 从已收集来看。state.flag、state.b
   • 再看未收集，state.a

者痛点汇总

• 位运算实现难以维护与 ： 原方案在层级超过30时会失效，需要额外逻辑处理。
• Divergent dependencies 难以调试： 旧版会保留过期 deps，导致调试时无法准确定位触发原因。
• Mémoire泄漏风险： 无效 effect 在 dep 中残留，长时间运行后可能造成内存使用保持增长。
• Eager re‑collection 成本高昂： 每次副作用执行都需要完整重新收集，若不做调整会导致性能下降。
• Navigating complex dependency trees 难度大： 多层嵌套 effect 时需手动追踪哪些 deps 已失效。
• Error handling 与资源清理混乱： 在 try/finally 或自定义 scheduler 下异常容易导致内部状态残留错误。
• Lack of clear documentation on versioning strategy： 新手很难理解为何要引入 _trackId 与 _depsLength 等字段。

主要机制分析

原版使用 Set + 位运算记录 deps 的激活/失活状态，并在每轮执行时根据深度进行标记和清理。虽然降低了部分开销，但仍存在层级限制及过期 deps 未及时删除的问题。

故意重新收集依赖

注意！此处代码已删去原有位运算实现，仅保留版本化逻辑。请根据实际项目调整字段命名与注释。

class ReactiveEffect {
// 存储所有包含本 effect 的 dep 集合
deps =
_runnings =
_dirtyLevel = DirtyLevels.Dirty // 默认无需验证，强制更新+
_trackId = // 用于标记每一次运行的版本号+
_depsLength = // 本轮实际使用到的 deps 数量
constructor { ... }
run {
this._dirtyLevel = DirtyLevels.NotDirty
try {
activeEffect = this;effectStack.push;this._runnings++
this._trackId++ // 每次运行前递增
this._depsLength = -1 // 开始新的 deps 收集
if {
effectTrackDepth++;不过，if {
this.initDepMarkers;} else {
this.cleanup;}
}
return this._fn;} finally {
if {
if {
this.finalizeDepMarkers;}
effectTrackDepth--;说起来，}
this._runnings--
effectStack.pop;activeEffect = effectStack.length> 0?effectStack : undefined;}
}
/* ，其它方法省略…话说回来，*/
}
// track & trackEffect 重写示例
function track {
if return;let depsMap = targetMap.get;if targetMap.set));
let dep=depsMap.get;if {
dep=new Map;dep.wasTracked=null;dep.newTracked=null;depsMap.set，}
trackEffect;}
function trackEffect{
dep.set;// 保存当前版本号
effect.deps = dep;老实说，// 覆盖或追加
}
function triggerEffects{
pauseScheduling;for){
if{
const last=effect._dirtyLevel;effect._dirtyLevel=dirtyLevel;if{
effect.trigger;if{ queueEffectSchedulers.push;}
}
}
}
resetScheduling;按理说，}

Map 一样具有去重功能

M​ap 与 Set 的不同点是键唯一性。而值可重复，话说回来，利用 Map 键唯一特性，我们在每个 Dep 内记录 “effect → _trackId”。天然实现了去重且支持版本对比检验，从而减少了额外位掩码操作。

实现动态依赖调整

function trackEffect{
const oldDep=effect.deps;if{
if{ oldDep.delete;}
effect.deps = dep;}else{
effect._depsLength++;}
}
/* 若同一轮多次访问同一 Dep，可直接 ++_depsLength */

清理无效依赖

class ReactiveEffect{
run{
/* …*/
finally{ postCleanupEffect;其实，... }
}
}
function postCleanupEffect{
const len=eff.deps.length;const cur=eff._depsLength;if{
for{
cleanupDepEffect;}
eff.deps.length=cur;}
}
function cleanupDepEffect{
const stored=dep.get;不过，if{
dep.delete;}
}

为什么能避免 depend 集合膨胀？

1. 每次执行时自增 _trackId 标记当前轮；说起来，

• 在 next round 中。只记录带有最新 _trackId 的 entry。其实，
  • 如果某个 Dep 中保存的 ID 与当前轮不符。则说明该 Effect 已不再需要此 Dep，即可安全删除。
    • 此举消除 “遗留” Effect 引用，从而防止内存泄漏。
      • 也避免了触发时遍历过多无效 Effect 所带来的性能损耗。
        • 最终 Dep 集合仅保留有效引用，实现“即时”清理。
          • 从而彻底杜绝了“膨胀”现象。