1.3 响应式系统(一)

1.响应式系统与副作用函数

副作用函数：

function effect(){
    document.body.innerText=obj.text
}

effect函数的执行会直接或间接影响到其它函数的执行，其改变body的文本内容，此时就成effect函数产生了副作用。

当副作用函数effect执行时，会触发obj.text的读取操作，修改obj.text的值时，会触发obj.text的设置操作。想象一下，我们可以拦截一个对象的读取和设置操作，例如将函数effect拦截到一个桶里，当obj.text设置时再把effect函数取出来执行。为了实现这种方法，可以添加对对象数据的代理，使用Proxy来实现。

//存储副作用函数的桶
const bucket=new Set();
//原始数据
const data={text:'hello'}
//对原始数据的代理
const obj=new Proxy(data,{
    get(target,key){
        //添加副作用函数
        bucket.add(effect)
        //返回属性值
        return target[key]
    },
    set(target,key,newval){
        //设置属性值
        target[key]=newval;
        //取出副作用函数来执行
        bucket.forEach(fn=>fn())
        return true
    }
})

function effect(){
    document.body.innerText=obj.text
}
effect()
setTimeout(()=>{obj.text='hello tom'},1000)

执行代码，在一秒后，就能实现效果。