目标是在vue-next响应式模块中实现两个API：reactive,effectvarobj=reactive({name:'Vic',haha??:{num:0}})effect(()=>{console.log('打印消息：obj.name',obj.name)})effect(()=>{console.log('打印消息：obj.haha.num',obj.haha.num)})obj.name='qiu'obj.haha.num=9//输出Vic//输出0//输出qiu//输出9代码实现consttargetMap=newWeakMap()letactiveEffect=nullconsthandlers={get(target,key,receiver){constres=Reflect.get(target,key,receiver)tarck(target,key)returntypeofres==='object'?reactive(res):res},set(target,key,value,receiver){constres=Reflect.set(target,key,value,receiver)trigger(target,key)返回res}}functionreactive(target){returnnewProxy(target,handlers)}functiontarck(target,key){if(!activeEffect)返回letdepsMap=targetMap.get(target)if(!depsMap)targetMap.set(target,(depsMap=newMap()))letdeps=depsMap.get(key)if(!deps)depsMap.set(key,(deps=newSet()))if(!deps.has(activeEffect))deps.add(activeEffect)}functiontrigger(target,key){targetMap.get(target).get(key).forEach(fn=>fn())}functioneffect(fn){activeEffect=fnfn()activeEffect=null}
