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

高山我梦口香糖

已于 2022-04-25 23:31:46 修改

阅读量451

点赞数

分类专栏：技术文章标签： vue.js

于 2022-04-25 20:36:53 首次发布

本文链接：https://blog.youkuaiyun.com/Madman528/article/details/124412727

版权

27 篇文章

订阅专栏

本文详细介绍了JavaScript中的Proxy对象，展示了如何通过Proxy实现数据的读取、修改和删除的拦截操作，以及其在响应式编程中的基本用法。通过示例代码，解释了get和set方法的使用，探讨了如何在数据访问时添加自定义逻辑，进一步理解JavaScript的代理机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考文档

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