折腾vue3响应式原理(1)--proxy对象

参考文档

Proxy - JavaScript | MDN

<script>
    let person = {
      name: '高山我梦',
      age: 20
    }
    let p = new Proxy(person, {})
  </script>

简单地操作一下

这样是不是说完成了代理,我改源对象代理对象也改,我改代理对象源对象也改 👇👇👇

 响应式就这么简单?不,这只是简单代理而已,还没有操作呢!

看Handler,也就是传进去的第二个值,是个配置对象,里面可写函数

 那是不是访问一个数据这样就可以了?

let p = new Proxy(person, {
      get(target, property, receiver) {
        return target.property     
      }
    })

不可以!因为property是个字符串!

console.log(typeof property);//string  
是个字符串类型,所以不能对象.属性

改成这样就行了

 let p = new Proxy(person, {
      get(target, property, receiver) {
        console.log('我是读取的逻辑哦');
        return target[property]
      }
    })

也就能够在读取的时候加入逻辑 ,此时代理对象的handler也多了一个get,就是我添加进去的

---

---

---

set呢

第三个值就是传进来的新的值

set(target, property, value) {
        console.log('我被修改了,传进来的值是', value);
      }

 

修改就会触发,当然,这个set比vue2的set厉害,还可以增加,也会触发

 写上逻辑就行了

 set(target, property, value) {
        console.log('我被修改或增加了,传进来的值是', value);
        // 写上逻辑就行了
        target[property] = value
      }

---

---

---

既然删除增加修改都有了,那么删除呢

deleteProperty(target, property) {
        console.log('要进行删除,删除的值为', property);
        return delete target[property]
      }