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]的Settrigger(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/triggercomputed用懒执行的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，在复杂场景中定位与优化更新行为。
)
