折腾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]
      }

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值