SOURCE

const app = document.getElementById('app')
const app2 = document.getElementById('app2')

const obj1 = {name: 'obj1', text1: 'hello1'}
const obj2 = {name: 'obj2', text1: 'hello2'}

const bucket = new WeakMap()

let activeEffect;
//通过此函数注册副作用函数
function registerEffect(fn){
    activeEffect = fn;
    fn();
}

function myProxy(data){
    const proxy = new Proxy(data, {
        get(target, key){
            console.log('执行get', key)
            if(!activeEffect) return;
            let depsMap = bucket.get(target)
            if(!depsMap){
                bucket.set(target, depsMap=new Map())
            }
            let deps = depsMap.get(key);
            if(!deps){
                depsMap.set(key, deps=new Set());
            }
            if(activeEffect){
                deps.add(activeEffect)
            }
            return target[key];
        },
        set(target, key, val){
            console.log('执行set', key)
            target[key] = val;
            let depsMap = bucket.get(target)
            if(depsMap){
                let deps = depsMap.get(key)
                deps && deps.forEach(fn=>fn())
            }
            return true;
        }
    })
    return proxy;
}

const proxy1 = myProxy(obj1)
const proxy2 = myProxy(obj2)

//副作用函数
const effect1 = ()=>{
    app.innerHTML = proxy1.name;
}

const effect2 = ()=>{
    app2.innerHTML = proxy2.name;
}
//注册副作用函数
registerEffect(effect1)
registerEffect(effect2)

proxy1.name = 'world'
proxy2.name = 'world2'

console.log({bucket})

<div id="app"></div>
<div id="app2"></div>