当前位置：首页 > news >正文

前端工程重试怎样避免放大故障

news 2026/8/31 23:28:42

前端工程重试怎样避免放大故障

看过“手写 Vue3 原理”教程后，容易把响应式理解成：用 Proxy 拦截读写，再保存副作用函数。

这类简化 Demo 很难说明 Vue3 响应式系统在真实应用中的取舍。

在真实应用中，响应式引擎还要处理嵌套effect、组件卸载后的依赖清理、循环触发，以及大量数据读写时的垃圾回收（GC）开销。

Vue3 的响应式模块通过惰性代理、精确依赖收集等设计，改变了初始化和更新时的工作方式。实际性能仍取决于应用场景。

1. 为什么 Vue3 弃用了 Vue2 的`Object.defineProperty`？

先看 Vue2 这套方案的限制。

Vue2 采用Object.defineProperty对对象的每个属性进行递归遍历与劫持。这种方式有两个致命缺点：

初始化成本较高：对于深度嵌套的大型 JSON 对象，Vue2 会在组件创建时递归遍历，可能增加首屏初始化成本。
无法拦截动态增删属性与数组索引变更：所以才有了让人诟病的Vue.set和Vue.delete补丁机制。

Vue3 采用 ES6 的Proxy机制改变了依赖追踪方式。Proxy代理整个对象，嵌套对象会在访问时再进行响应式转换，从而避免一开始遍历所有层级。

这种惰性处理通常能降低大型数据结构的初始化工作量；具体收益需要在目标数据和设备上测量。

2. 依赖收集的数据结构设计与内存安全

Vue3 的track不是用数组简单保存副作用函数，而是按对象和属性维护依赖关系：

targetMap(WeakMap)：键为原始对象target，值为depsMap。当对象不再被其他地方引用时，WeakMap不会阻止垃圾回收；但内存安全仍取决于完整的引用链和清理逻辑。
depsMap(Map)：键为对象的具体属性key，值为dep集合。
dep(Set)：存储所有依赖于该key的副作用函数ReactiveEffect。使用Set数据结构可以天然去除重复的依赖订阅。

下面这套 TypeScript 代码，展现了 Vue3 响应式核心effect、track与trigger的模块化完整实现。

// 1. 全局依赖收集容器 (WeakMap 保证内存安全) type EffectFn = Function & { deps: Set<EffectFn>[] }; const targetMap = new WeakMap<object, Map<string | symbol, Set<EffectFn>>>(); let activeEffect: EffectFn | null = null; const effectStack: EffectFn[] = []; // 解决嵌套 effect 执行栈错乱问题 // 2. 创建副作用函数 effect export function effect(fn: Function): EffectFn { const effectFn: EffectFn = () => { cleanup(effectFn); // 每次执行前清理旧依赖，解决分支切换时的残留依赖问题 try { activeEffect = effectFn; effectStack.push(effectFn); return fn(); // 执行用户传入的函数，内部触发 getter 进而调用 track } finally { effectStack.pop(); activeEffect = effectStack[effectStack.length - 1] || null; } }; effectFn.deps = []; effectFn(); // 默认立即执行一次 return effectFn; } // 依赖清理：分支切换场景下的核心逻辑 (如 v-if) function cleanup(effectFn: EffectFn) { for (const dep of effectFn.deps) { dep.delete(effectFn); } effectFn.deps.length = 0; } // 3. 依赖收集 (track) export function track(target: object, key: string | symbol) { if (!activeEffect) return; let depsMap = targetMap.get(target); if (!depsMap) { targetMap.set(target, (depsMap = new Map())); } let dep = depsMap.get(key); if (!dep) { depsMap.set(key, (dep = new Set())); } if (!dep.has(activeEffect)) { dep.add(activeEffect); activeEffect.deps.push(dep); // 重新建立双向引用 } } // 4. 依赖触发 (trigger) export function trigger(target: object, key: string | symbol) { const depsMap = targetMap.get(target); if (!depsMap) return; const dep = depsMap.get(key); if (!dep) return; // 构造新的 Set 运行，防止在执行 cleanup 时产生 infinite loop const effectsToRun = new Set<EffectFn>(); dep.forEach(effectFn => { // 避免无限递归：如果 trigger 触发的 effect 就是当前正在执行的 activeEffect，直接跳过 if (effectFn !== activeEffect) { effectsToRun.add(effectFn); } }); effectsToRun.forEach(effectFn => effectFn()); } // 5. reactive 代理实现 export function reactive<T extends object>(target: T): T { return new Proxy(target, { get(target, key, receiver) { const res = Reflect.get(target, key, receiver); track(target, key); // 依赖收集 // 惰性递归代理 return typeof res === 'object' && res !== null ? reactive(res) : res; }, set(target, key, value, receiver) { const oldValue = (target as any)[key]; const result = Reflect.set(target, key, value, receiver); // 只有在新旧值真正改变时才触发 trigger，避免无用更新 if (hasChanged(value, oldValue)) { trigger(target, key); } return result; }, }); } function hasChanged(value: any, oldValue: any): boolean { return !Object.is(value, oldValue); }