Vue3 响应式原理深度解析：Proxy 实现与依赖收集逻辑-平芜编程栈

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，在复杂场景中定位与优化更新行为。