企业官网建设流程全解析

Vue3 响应式原理深度解析：Proxy 实现与依赖收集逻辑

面向前端工程师的系统性解析：从设计目标到数据结构、从拦截细节到依赖收集与调度，再到ref、computed与数组、Map/Set 等容器的特殊处理。文章配套一个可运行的精简版响应式系统，帮助在源码级别建立完整心智模型。

TL;DR

• Vue3 使用Proxy+WeakMap实现响应式，替代 Vue2 的defineProperty
• 依赖收集通过effect执行时的访问轨迹完成，核心是track与trigger
• 数据结构：targetMap: WeakMap<object, Map<key, Set<effect>>>
• 细粒度触发：区分set、add、delete与数组length、迭代依赖
• computed基于懒执行的effect，用dirty标记与调度器缓存结果
• ref以对象包装原始值，通过get/set触发依赖
• 性能关键：只在被访问的键上收集依赖；用WeakMap避免内存泄漏；按需调度

设计目标

• 精准依赖收集：仅对访问过的属性建立依赖，减少无效更新
• 一致语义：对象、数组、Map/Set 等统一遵循“读时收集、写时触发”
• 良好可拓展性：支持readonly、shallow、custom scheduler
• 可维护性：核心概念内聚，便于调试与定位问题

核心数据结构

typeEffectFn=(()=>any)&{deps?:Set<Set<EffectFn>>;scheduler?:(job:()=>void)=>void;lazy?:boolean;};consttargetMap=newWeakMap<object,Map<any,Set<EffectFn>>>();letactiveEffect:EffectFn|null=null;consteffectStack:EffectFn[]=[];constITERATE_KEY=Symbol('iterate');constMAP_KEY_ITERATE_KEY=Symbol('map_key_iterate');

effect 与依赖收集

• effect(fn)负责在执行过程中记录所有访问到的响应式属性
• track(target, key)将当前activeEffect放入targetMap[target][key]的Set
• trigger(target, key, type)找到依赖集合并逐个执行或交由调度器处理
• 通过effectStack支持嵌套effect与正确的activeEffect恢复
• 通过清理旧依赖避免“脏依赖”导致的错误触发

functioncleanup(effect:EffectFn){if(!effect.deps)return;for(constdepofeffect.deps)dep.delete(effect);effect.deps.clear();}exportfunctioneffect(fn:()=>any,options:{scheduler?:(job:()=>void)=>void;lazy?:boolean}={}):EffectFn{conste:EffectFn=functionwrappedEffect(){cleanup(e);activeEffect=e;effectStack.push(e);try{returnfn();}finally{effectStack.pop();activeEffect=effectStack[effectStack.length-1]||null;}}asEffectFn;e.deps=newSet();e.scheduler=options.scheduler;e.lazy=!!options.lazy;if(!e.lazy)e();returne;}functiontrack(target:object,key:any){if(!activeEffect)return;letdepsMap=targetMap.get(target);if(!depsMap){depsMap=newMap();targetMap.set(target,depsMap);}letdep=depsMap.get(key);if(!dep){dep=newSet();depsMap.set(key,dep);}if(!dep.has(activeEffect)){dep.add(activeEffect);activeEffect.deps!.add(dep);}}functiontrigger(target:object,key:any,type:'set'|'add'|'delete'){constdepsMap=targetMap.get(target);if(!depsMap)return;consteffects=newSet<EffectFn>();constaddEffects=(dep?:Set<EffectFn>)=>{if(!dep)return;for(consteofdep)effects.add(e);};addEffects(depsMap.get(key));if(type==='add'||type==='delete')addEffects(depsMap.get(ITERATE_KEY));construn=(e:EffectFn)=>{if(e.scheduler)e.scheduler(()=>e());elsee();};for(consteofeffects)run(e);}

Proxy 拦截与 handler 设计

• get中进行track，并返回属性值；对对象值递归包装以保持深度响应
• set区分新增与修改，从而决定是否触发迭代依赖
• has、ownKeys读操作也需要track，迭代依赖采用ITERATE_KEY
• 对数组与 Map/Set 等容器在迭代与变更时进行特殊处理

constreactiveMap=newWeakMap<object,any>();exportfunctionreactive<Textendsobject>(obj:T):T{constexisting=reactiveMap.get(obj);if(existing)returnexisting;constproxy=newProxy(obj,{get(target,key,receiver){constres=Reflect.get(target,key,receiver);track(target,key);if(typeofres==='object'&&res!==null)returnreactive(resasobject)asany;returnres;},set(target,key,value,receiver){consthadKey=Object.prototype.hasOwnProperty.call(target,key);constoldVal=(targetasany)[key];constresult=Reflect.set(target,key,value,receiver);if(!hadKey)trigger(target,key,'add');elseif(oldVal!==value)trigger(target,key,'set');returnresult;},has(target,key){constres=Reflect.has(target,key);track(target,key);returnres;},ownKeys(target){track(target,ITERATE_KEY);returnReflect.ownKeys(target);},deleteProperty(target,key){consthadKey=Object.prototype.hasOwnProperty.call(target,key);constresult=Reflect.deleteProperty(target,key);if(hadKey&&result)trigger(target,key,'delete');returnresult;}});reactiveMap.set(obj,proxy);returnproxyasT;}

ref 与 computed 的实现

• ref将原始值包成对象，在value的get/set上track/trigger
• computed用懒执行的effect，首次访问求值，后续由依赖变更时标记为dirty

exportfunctionref<T>(raw:T){constr={getvalue(){track(r,'value');returnraw;},setvalue(v:T){raw=v;trigger(r,'value','set');}};returnr;}exportfunctioncomputed<T>(getter:()=>T){letcached:T;letdirty=true;construnner=effect(()=>{cached=getter();},{lazy:true,scheduler:job=>job()});return{getvalue(){if(dirty){runner();dirty=false;}track(this,'value');returncached!;}};}

可运行的最小完整示例

// 基本使用conststate=reactive({count:0,nested:{a:1}});constdoubled=computed(()=>state.count*2);effect(()=>{document.querySelector('#app')!.textContent=`count=${state.count}, doubled=${doubled.value}`;});setInterval(()=>{state.count++;},1000);

迭代依赖与数组/容器细节

• 数组：length变化会影响索引依赖；迭代依赖通过ITERATE_KEY
• Map/Set：键迭代与值迭代分别跟踪，可用MAP_KEY_ITERATE_KEY与ITERATE_KEY
• 容器方法需要“仪器化”，例如set.add、map.set在内部调用trigger
• 迭代读取（如for...in、for...of、Object.keys、ownKeys）都需要track(ITERATE_KEY)

调度器与批处理

• effect可选scheduler，用于将同步触发改为异步或批处理
• 常见实现是微任务队列，将多次触发合并后统一执行

constqueue=newSet<Function>();letflushing=false;functionqueueJob(job:Function){queue.add(job);if(!flushing){flushing=true;Promise.resolve().then(()=>{for(constjofqueue)j();queue.clear();flushing=false;});}}conststate2=reactive({x:0});conste2=effect(()=>{console.log(state2.x);},{scheduler:queueJob});state2.x=1;state2.x=2;

性能与内存管理

• WeakMap避免持有对已释放对象的强引用，降低泄漏风险
• 精准依赖收集减少无效更新；避免在未访问的属性上建立依赖
• 清理旧依赖确保触发集合不膨胀；对高频更新用调度器批处理

常见坑与排查

• 未在effect中访问响应式数据，导致未收集依赖
• 忽略迭代依赖，增删属性或容器项不触发更新
• 忽略数组length与索引的耦合，更新行为不一致
• 循环触发与递归更新，需借助调度器或状态分离
• 深浅响应不当：shallowReactive只包装一层；readonly禁止写入

与 Vue3 源码的差异与拓展

• 示例为教学版，省略了readonly、shallow、toRaw、markRaw等
• 未覆盖 Map/Set 的完整仪器化、TrackOpTypes/TriggerOpTypes的枚举细分
• 源码对数组、TypedArray、内建集合均做了更细粒度优化与边界处理

总结

Vue3 响应式的核心在于“读时收集、写时触发”这条主线。以Proxy为载体、以WeakMap → Map → Set为依赖索引，辅以effect栈与调度器策略，既保证正确性与性能，又为容器类型与高级特性预留扩展空间。理解这些细节后，能够在业务中更精准地使用ref、reactive与computed，在复杂场景中定位与优化更新行为。