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>