SOURCE

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

const data = {text: 'hello', name: 'abc'}

const bucket = new Map()

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


const proxy = new Proxy(data, {
    get(target, key){
        console.log('执行get', key)
        let effects = bucket.get(key)
        if(!effects){
            bucket.set(key, effects=new Set())
        }
        if(activeEffect){
            effects.add(activeEffect)
        }
        return target[key];
    },
    set(target, key, val){
        console.log('执行set', key)
        target[key] = val;
        const effects = bucket.get(key);
        effects&&effects.forEach(fn=>fn());
        return true;
    }
})
//副作用函数
const effect1 = ()=>{
    app.innerHTML = proxy.text;
}

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

proxy.text = 'world'

proxy.abc = 'def'

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