当前位置：首页 > article >正文

浅谈 proxy

article 2024/11/25 0:38:23

应用场景

Vue2采用的defineProperty去实现数据绑定，Vue3则改为Proxy，遇到了什么问题？

- 在Vue2中不能检测数组和对象的变化

1. 无法检测对象property 的添加或移除

var vm = new Vue({
  data:{
    a:1
  }
})

// `vm.a` 是响应式的

vm.b = 2
// `vm.b` 是非响应式的

2. 不能检测以下数组的变动

利用索引直接设置一个数组项时
修改数组的长度

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

Vue 3 使用Proxy对象来实现响应式数据绑定和属性收集。Proxy可以代理整个对象，而不仅仅是对象的已有属性，并且能够更好地处理数组和新增属性等情况

基本用法

defineProperty

      let a = 2;
      let b = 3;
      let c = a + b;
      const obj = {};
      console.log(c);
      Object.defineProperty(obj, 'a', {
        get() {
          return a;
        },
        set(newVal) {
          a = newVal;
        c= a+b
        },
        enumerable: true,
        configurable: true,
      });
      Object.defineProperty(obj, 'b', {
        get() {
          return b;
        },
        set(newVal) {
          b = newVal;
          c= a+b
        },
        enumerable: true,
        configurable: true,
      });
      obj['a'] = 10
      console.log(c);

Proxy

  let numArr = [3, 6, 9];

      numArr = new Proxy(numArr, {
        get(target, prop) {
          if (prop in target) {
            return target[prop];
          } else {
            return 0;
          }
        },
      });

      console.log(numArr[1]); // 6
      console.log(numArr[7]); // 0