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[当前活跃的 effectbr/记录到 targetMap] G -- H[targetMap: WeakMapbr/target - Mapbr/key - Setlt;effectgt;] D -- I[trigger#40;target, key#41;br/派发更新] I -- J[从 targetMap 取出br/key 对应的 effect 集合] J -- K[批量执行 effectbr/调度器控制执行时机] L[effect#40;fn#41;] -- M[创建 ReactiveEffect] M -- N[执行 fn 时自动收集依赖] N -- F K -- O[computed: 懒执行 缓存] K -- P[watch: 异步队列 去重] K -- Q[组件渲染: nextTick 批量更新]依赖收集的核心数据结构是targetMap一个三层嵌套的 Map 结构。最外层是WeakMaptarget, Map使用 WeakMap 的原因是当响应式对象被垃圾回收时对应的依赖记录也会被自动回收避免内存泄漏。中间层是Mapkey, Seteffect记录每个属性关联的所有副作用函数。最内层是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: WeakMapobject, Mapstring | symbol, SetReactiveEffect new WeakMap(); // ReactiveEffect 类封装副作用函数及其依赖关系 class ReactiveEffect { private _fn: EffectFn; deps: SetReactiveEffect[] []; // 该 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 reactiveT 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 computedT(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.bflag为 true 时依赖data.a切换为 false 后应不再依赖data.a。如果不清理旧依赖data.a变更仍会触发该 effect 的无效执行。Vue3 通过每次 effect 执行前清理所有旧依赖、重新收集的方式解决此问题代价是每次执行都需要完整的依赖重建。五、总结Vue3 响应式系统的核心改进在于从属性劫持升级为对象代理从根本上解决了 Vue2 无法检测属性新增/删除和数组索引赋值的问题。Proxy WeakMap 的组合实现了惰性深层代理和自动内存回收在大型对象场景下的初始化性能显著优于 Vue2。落地建议理解track/trigger机制有助于编写高效的响应式代码——避免在 computed 中执行副作用、合理使用shallowRef减少深层代理开销、在长列表中使用markRaw跳过不需要响应式的对象。性能优化的前提是测量通过 Vue DevTools 的依赖追踪面板可以精确定位不必要的响应式开销。
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[当前活跃的 effectbr/记录到 targetMap] G -- H[targetMap: WeakMapbr/target - Mapbr/key - Setlt;effectgt;] D -- I[trigger#40;target, key#41;br/派发更新] I -- J[从 targetMap 取出br/key 对应的 effect 集合] J -- K[批量执行 effectbr/调度器控制执行时机] L[effect#40;fn#41;] -- M[创建 ReactiveEffect] M -- N[执行 fn 时自动收集依赖] N -- F K -- O[computed: 懒执行 缓存] K -- P[watch: 异步队列 去重] K -- Q[组件渲染: nextTick 批量更新]依赖收集的核心数据结构是targetMap一个三层嵌套的 Map 结构。最外层是WeakMaptarget, Map使用 WeakMap 的原因是当响应式对象被垃圾回收时对应的依赖记录也会被自动回收避免内存泄漏。中间层是Mapkey, Seteffect记录每个属性关联的所有副作用函数。最内层是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: WeakMapobject, Mapstring | symbol, SetReactiveEffect new WeakMap(); // ReactiveEffect 类封装副作用函数及其依赖关系 class ReactiveEffect { private _fn: EffectFn; deps: SetReactiveEffect[] []; // 该 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 reactiveT 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 computedT(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.bflag为 true 时依赖data.a切换为 false 后应不再依赖data.a。如果不清理旧依赖data.a变更仍会触发该 effect 的无效执行。Vue3 通过每次 effect 执行前清理所有旧依赖、重新收集的方式解决此问题代价是每次执行都需要完整的依赖重建。五、总结Vue3 响应式系统的核心改进在于从属性劫持升级为对象代理从根本上解决了 Vue2 无法检测属性新增/删除和数组索引赋值的问题。Proxy WeakMap 的组合实现了惰性深层代理和自动内存回收在大型对象场景下的初始化性能显著优于 Vue2。落地建议理解track/trigger机制有助于编写高效的响应式代码——避免在 computed 中执行副作用、合理使用shallowRef减少深层代理开销、在长列表中使用markRaw跳过不需要响应式的对象。性能优化的前提是测量通过 Vue DevTools 的依赖追踪面板可以精确定位不必要的响应式开销。
