前端每日一练：vue3 为什么要用 proxy 替换 Object.defineproperty ？为什么只对对象劫持，而要对数组进行方法重写？

vue3 为什么要用 proxy 替换 Object.defineproperty ？

• Vue 3 在设计上选择使用 Proxy 替代 Object.defineProperty 主要是为了提供更好的响应性和性能。​
• Object.defineProperty 是在 ES5 中引入的属性定义方法，用于对对象的属性进行劫持和拦截。Vue 2.x 使用 Object.defineProperty 来实现对数据的劫持，从而实现响应式数据的更新和依赖追踪。​
• Object.defineProperty 只能对已经存在的属性进行劫持，无法拦截新增的属性和删除的属性。这就意味着在 Vue 2.x 中，当你添加或删除属性时，需要使用特定的方法(Vue.set 和 Vue.delete)来通知 Vue 响应式系统进行更新。这种限制增加了开发的复杂性。​
• Object.defineProperty 的劫持是基于属性级别的，也就是说每个属性都需要被劫持。这对于大规模的对象或数组来说，每次都需要深度递归进行响应劫持，会导致性能下降。因为每个属性都需要添加劫持逻辑，这会增加内存消耗和初始化时间。​
• 相比之下，Proxy 是 ES6 中引入的元编程特性，可以对整个对象进行拦截和代理。Proxy 提供了更强大和灵活的拦截能力，可以拦截对象的读取、赋值、删除等操作。Vue 3.x 利用 Proxy 的特性，可以更方便地实现响应式系统。​
• 使用 Proxy 可以解决 Object.defineProperty 的限制问题。它可以直接拦截对象的读取和赋值操作，无需在每个属性上进行劫持。这样就消除了属性级别的劫持开销，提高了初始化性能。另外，Proxy 还可以拦截新增属性和删除属性的操作，使得响应式系统更加完备和自动化。
• Vue 3 中使用 Proxy 初始化时只对通过 get 访问到的属性进行响应式处理。这是一种优化策略，也被称为"懒代理"或"懒观察"，它有助于提高性能并减少不必要的代理操作。

具体来说，当你通过 get 访问对象的属性时，Vue 3 会检查该属性是否已经是响应式的，如果不是，它会在这个时候进行代理，以确保后续对该属性的访问和修改都能够触发相应的响应式更新。这个懒代理的策略有助于避免不必要的性能开销。在初始化时，不是所有的属性都一定会被访问，因此只对实际被访问到的属性进行代理，而不是对整个对象进行一次性的全面代理。这种方式有效地减少了初始渲染时的不必要计算和性能开销。需要注意的是，如果你希望在对象创建时就代理所有属性，可以使用 reactive 函数，它会递归地代理整个对象。但在许多情况下，懒代理的方式是更加高效和合理的选择。 

//Proxy实现数据劫持


observe(data) {
  const that = this;
  let handler = {
   get(target, property) {
      return target[property];
    },
    set(target, key, value) {
      let res = Reflect.set(target, key, value);
      that.subscribe[key].map(item => {
        item.update();
      });
      return res;
    }
  }
  this.$data = new Proxy(data, handler);
}

 

为什么只对对象劫持，而要对数组进行方法重写？

因为对象最多也就几十个属性，拦截起来数量不多，但是数组可能会有几百几千项，拦截起来非常耗性能，所以直接重写数组原型上的方法，是比较节省性能的方案