Proxy 与依赖追踪：Vue3 响应式系统的底层机制剖析

Proxy 与依赖追踪：Vue3 响应式系统的底层机制剖析

一、Object.defineProperty 的历史包袱：Vue2 响应式的结构性缺陷

Vue2 的响应式系统基于Object.defineProperty，这一 API 存在三个无法通过补丁修复的结构性缺陷。第一，无法检测属性的新增和删除——data对象上不存在的属性，后续通过this.newProp = value添加后不会触发视图更新，必须调用Vue.set()。第二，无法拦截数组索引的直接赋值——arr[0] = newValue和arr.length = newLength均不会触发响应，Vue2 不得不重写数组的七个变异方法作为变通方案。第三，深层嵌套对象的递归拦截在初始化阶段造成显著性能开销——一个包含 1000 个属性的对象，初始化时需要执行 1000 次defineProperty调用。

这些缺陷的根源在于defineProperty是"属性级别"的拦截机制，它只能劫持已知的属性，对对象结构的动态变化无能为力。Vue3 选择 Proxy 正是因为 Proxy 是"对象级别"的拦截，可以捕获包括属性新增、删除、in操作符、for...in遍历在内的所有操作。

二、Proxy 拦截与依赖收集：Vue3 响应式的核心运行时

Vue3 的响应式系统由三个核心子系统构成：Reactive（响应式转换）、Effect（副作用管理）和 Dependency Tracking（依赖追踪）。

flowchart TD A[reactive&#40;target&#41;] --> B[创建 Proxy 代理对象] B --> C[拦截 get 操作] B --> D[拦截 set 操作] B --> E[拦截 has/deleteProperty 等操作] C --> F[track&#40;target, key&#41;<br/>依赖收集] F --> G[当前活跃的 effect<br/>记录到 targetMap] G --> H[targetMap: WeakMap<br/>target -> Map<br/>key -> Set&lt;effect&gt;] D --> I[trigger&#40;target, key&#41;<br/>派发更新] I --> J[从 targetMap 取出<br/>key 对应的 effect 集合] J --> K[批量执行 effect<br/>调度器控制执行时机] L[effect&#40;fn&#41;] --> M[创建 ReactiveEffect] M --> N[执行 fn 时自动收集依赖] N --> F K --> O[computed: 懒执行 + 缓存] K --> P[watch: 异步队列 + 去重] K --> Q[组件渲染: nextTick 批量更新]

依赖收集的核心数据结构是targetMap：一个三层嵌套的 Map 结构。最外层是WeakMap<target, Map>，使用 WeakMap 的原因是当响应式对象被垃圾回收时，对应的依赖记录也会被自动回收，避免内存泄漏。中间层是Map<key, Set<effect>>，记录每个属性关联的所有副作用函数。最内层是Set，保证同一个 effect 不会被重复收集。

这个数据结构的查询路径是：给定target和key，先从 WeakMap 中找到该对象的依赖 Map，再从 Map 中找到该属性对应的 effect 集合。时间复杂度为 O(1)，这是 Vue3 响应式系统性能优于 Vue2 的关键之一。

三、核心机制的生产级实现

以下代码还原了 Vue3 响应式系统的核心逻辑（简化版，保留关键设计决策）：

// 依赖追踪的数据结构 type EffectFn = () => void; // 全局状态：当前正在执行的 effect let activeEffect: ReactiveEffect | null = null; // effect 栈：处理嵌套 effect（如 computed 内部访问响应式数据） const effectStack: ReactiveEffect[] = []; // 三层嵌套的依赖映射 const targetMap: WeakMap<object, Map<string | symbol, Set<ReactiveEffect>>> = new WeakMap(); // ReactiveEffect 类：封装副作用函数及其依赖关系 class ReactiveEffect { private _fn: EffectFn; deps: Set<ReactiveEffect>[] = []; // 该 effect 被哪些 dep 收集 private scheduler?: (fn: EffectFn) => void; private active: boolean = true; constructor(fn: EffectFn, scheduler?: (fn: EffectFn) => void) { this._fn = fn; this.scheduler = scheduler; } run() { // 非活跃状态直接执行函数，不收集依赖 if (!this.active) { return this._fn(); } // 入栈：保存上一个 activeEffect，支持嵌套 effectStack.push(activeEffect!); activeEffect = this; // 执行前清理旧依赖：防止分支切换导致的冗余触发 cleanupEffect(this); try { return this._fn(); } finally { // 出栈：恢复上一个 activeEffect effectStack.pop(); activeEffect = effectStack[effectStack.length - 1] ?? null; } } stop() { if (this.active) { cleanupEffect(this); this.active = false; } } } // 清理 effect 的所有依赖：解决分支切换问题 function cleanupEffect(effect: ReactiveEffect) { effect.deps.forEach((dep) => { dep.delete(effect); }); effect.deps.length = 0; } // 依赖收集：在 get 拦截器中调用 function track(target: object, key: string | symbol): void { if (!activeEffect) return; // 非 effect 上下文中访问，不收集 let depsMap = targetMap.get(target); if (!depsMap) { depsMap = new Map(); targetMap.set(target, depsMap); } let dep = depsMap.get(key); if (!dep) { dep = new Set(); depsMap.set(key, dep); } if (!dep.has(activeEffect)) { dep.add(activeEffect); activeEffect.deps.push(dep); // 双向记录，便于 cleanup } } // 派发更新：在 set 拦截器中调用 function trigger(target: object, key: string | symbol): void { const depsMap = targetMap.get(target); if (!depsMap) return; const dep = depsMap.get(key); if (!dep) return; // 创建副本遍历，避免 effect 执行过程中修改 Set 导致无限循环 const effectsToRun = new Set(dep); effectsToRun.forEach((effect) => { // 避免递归：当前 effect 不应触发自身 if (effect !== activeEffect) { if (effect.scheduler) { // 有调度器时由调度器决定执行时机（如 computed 的懒执行） effect.scheduler(effect.run.bind(effect)); } else { effect.run(); } } }); } // reactive：创建响应式代理 function reactive<T extends object>(target: T): T { const proxy = new Proxy(target, { get(target, key, receiver) { // Reflect 保证 this 指向代理对象而非原始对象 const result = Reflect.get(target, key, receiver); track(target, key); // 深层响应式：如果属性值是对象，递归代理 // 注意：这里是懒代理，仅在访问时才创建，优于 Vue2 的初始化时全量递归 if (typeof result === 'object' && result !== null) { return reactive(result); } return result; }, set(target, key, value, receiver) { const oldValue = (target as any)[key]; const result = Reflect.set(target, key, value, receiver); // 仅在值真正变化时触发更新，避免无意义的重渲染 if (!Object.is(oldValue, value)) { trigger(target, key); } return result; }, has(target, key) { track(target, key); return Reflect.has(target, key); }, deleteProperty(target, key) { const hadKey = key in target; const result = Reflect.deleteProperty(target, key); if (hadKey && result) { trigger(target, key); } return result; }, }); return proxy; } // computed：基于 effect 的懒求值 + 缓存 function computed<T>(getter: () => T) { let value: T; let dirty: boolean = true; // 脏标记：依赖变更时置为 true const effect = new ReactiveEffect(getter, () => { // 调度器：依赖变更时不立即重新计算，仅标记为脏 if (!dirty) { dirty = true; // 触发 computed 自身的依赖更新 trigger(computedObj, 'value'); } }); const computedObj = { get value() { if (dirty) { value = effect.run() as T; dirty = false; // 读取 computed 时收集依赖 track(computedObj, 'value'); } return value; }, }; return computedObj; }

四、Proxy 响应式的边界条件与性能代价

原始类型无法被代理。Proxy 只能代理对象，reactive(1)或reactive('hello')不会创建响应式。Vue3 通过ref包装原始类型，内部使用对象{ value: rawValue }间接实现响应式。这引入了.value的心智负担，但这是 JavaScript 语言层面的硬限制。

深层响应式的惰性代理代价。Vue3 采用"懒代理"策略：只有被访问到的嵌套对象才会被 Proxy 包装。这解决了 Vue2 初始化时全量递归的性能问题，但首次访问深层属性时存在一次性代理创建开销。在频繁访问深层嵌套数据的场景（如大型 JSON 树遍历），首次访问的延迟可能累积到可感知的程度。

集合类型的特殊处理。Map、Set、WeakMap、WeakSet 的 API 不走 Proxy 的 get/set 拦截（如map.get()调用的是 Map 原型方法，不触发 Proxy 的 get trap）。Vue3 不得不为集合类型实现独立的 Proxy handler，通过拦截方法调用（has、get、add、delete等）来追踪依赖，代码复杂度显著高于普通对象。

分支切换与依赖清理。当 effect 内部存在条件分支时（如flag ? data.a : data.b），flag为 true 时依赖data.a，切换为 false 后应不再依赖data.a。如果不清理旧依赖，data.a变更仍会触发该 effect 的无效执行。Vue3 通过每次 effect 执行前清理所有旧依赖、重新收集的方式解决此问题，代价是每次执行都需要完整的依赖重建。

五、总结

Vue3 响应式系统的核心改进在于从"属性劫持"升级为"对象代理"，从根本上解决了 Vue2 无法检测属性新增/删除和数组索引赋值的问题。Proxy + WeakMap 的组合实现了惰性深层代理和自动内存回收，在大型对象场景下的初始化性能显著优于 Vue2。

落地建议：理解track/trigger机制有助于编写高效的响应式代码——避免在 computed 中执行副作用、合理使用shallowRef减少深层代理开销、在长列表中使用markRaw跳过不需要响应式的对象。性能优化的前提是测量：通过 Vue DevTools 的依赖追踪面板，可以精确定位不必要的响应式开销。