SOURCE

console 命令行工具 X clear

                    
>
console
const app = document.getElementById('app')

const data = {text: 'hello'}

const bucket = new Set()

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


const proxy = new Proxy(data, {
    get(target, key){
        if(activeEffect){
            bucket.add(activeEffect);
        }
        return target[key];
    },
    set(target, key, val){
        target[key] = val;
        bucket.forEach(fn=>fn())
        return true;
    }
})
//副作用函数
const effect = ()=>{
    app.innerHTML = proxy.text;
}
//注册副作用函数
registerEffect(effect)

proxy.text = 'world'
<div id="app"></div>