vue 依赖收集

let _curDependFun=null;
class dependCls{
    constructor(){
        this.dependFuns=new Set();
    }
    depend(){
        _curDependFun && this.dependFuns.add(_curDependFun);
    }
    run(){
        this.dependFuns.forEach(fun=>fun());
    }
}

function watchFun(fun){
    _curDependFun=fun
    fun()
    _curDependFun=null
}
const targetMap=new WeakMap()

function getDepend(target,key){
    let objMap=targetMap.get(target);
    if(!objMap){
        objMap=new Map();
        targetMap.set(target,objMap);
    }
    let keyMap=objMap.get(key);
    if(!keyMap){
        keyMap=new dependCls();
        objMap.set(key,keyMap);
    }
    return keyMap;
}

function reactive(obj){
    return new Proxy(obj,{
        get(target,key,receiver){
            const ret=Reflect.get(target,key,receiver);
            const depend=getDepend(target,key);
            depend.depend();
            return ret;
        },
        set(target,key,value,receiver){
            const ret=Reflect.set(target,key,value,receiver);
            const depend=getDepend(target,key);
            depend.run();
            return ret;
        }
    })
}

const newObj=reactive({
    name:'test'
})

watchFun(()=>{
    console.log('ddddd'+newObj.name)
})

newObj.name="44444"