源码系列 Vue3简单实现proxy数据代理

龙雨LongYu12

已于 2023-02-13 23:36:09 修改

阅读量482

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript源码系列文章标签： javascript 前端 vue.js

于 2023-02-13 23:33:48 首次发布

本文链接：https://blog.csdn.net/A88552211/article/details/129019181

JavaScript源码系列专栏收录该内容

3 篇文章

订阅专栏

Vue3引入了ES6的ProxyAPI来实现数据代理，相较于Vue2中的Object.defineProperty，它能更全面地监控对象及属性变化，包括动态添加和删除属性以及数组和复杂数据结构如Map、Set、WeakMap和WeakSet的变化。这消除了Vue2的一些限制并提高了性能。

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

Vue2 和 Vue3 的区别

vue3 中使用了ES6 的 ProxyAPI 对数据代理，监测的是整个对象，而不再是某个属性。

消除了 Vue 2 当中基于 Object.defineProperty 的实现所存在的很多限制

vue3可以监测到对象属性的添加和删除，可以监听数组的变化；

vue3支持 Map、Set、WeakMap 和 WeakSet。

 <script>
    const state = reactive({
      name:'你好',
      arr: [1,2,3],
      age: 11
    })
    console.log('woshi', state.name);
    state.age = 55
    console.log('----', state.age);

    function reactive(target) {
      if (!(typeof target == 'object' && target != null)) {
        return target
      }
      return new Proxy(target, {
        get(target, key, receiver) {
          const res = Reflect.get(target, key, receiver)
          console.log('使用', target, key, res);
          return res
        },
        set(target, key, value, receiver) {
          const res = Reflect.set(target, key, value, receiver) 
          console.log('修改', target, key, res);
          return res
        }
      })
    }
  </script>