5.1 理解Proxy与Reflect（下）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

看完了Proxy与Reflect的基本使用之后，我们实践一下。

我们曾经写过这样的代码

const reactive = (object)=>{
    return new Proxy(object,{
       get(target,key){
         track(target,key)
         return target[key]
       }
       set(target,key, newVal){
           target[key] = newVal
           trigger(target,key)
           return true
       }
    })
}

其实就是用Proxy代理了对象读和取操作，在读的时候收集依赖，在取的时候触发响应。看起来似乎没有问题，那么我们再试继续往下写

const obj = {
    a:1,
    get b(){
      return this.a
    }
}
const data = reactive(obj)
effect(()=>{
    console.log(data.b)
})
setTimeOut(()=>{
    data.b++
},500)

这里我们没有用一般的对象写法，而是通过访问器为它新增了一个b属性.之后，我们先把这个对象转换为响应式对象，再给他们设定一个响应式的回调，然后在冬天改变他的值，理论上这时候应该会执行副作用函数，但是实际上呢，根本不会执行，这一点等我再仔细看看书里