Vue | Vue3中为什么要用 Proxy 代替 Object.defineProperty

熟悉vue的人都知道在vue2.x之前都是使用object.defineProperty来实现双向数据绑定的，而在vue3.0中这个方法被取代了。

一. 为什么要替换Object.defineProperty

替换不是因为不好，是因为有更好的方法使用效率更高。

Object.defineProperty的缺点：

1. 在Vue中，Object.defineProperty无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应。

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

2. Object.defineProperty只能劫持对象的属性，因此，我们需要对每个对象的每个属性进行遍历。Vue 2.x里，是通过递归以及遍历data对象来实现对数据的监控的，如果属性值也是对象那么需要深度遍历，显然如果能劫持一个完整的对象，不管是对操作性还是性能都会有一个很大的提升。

而要取代它的Proxy有以下两个优点：

1. 可以劫持整个对象，并返回一个新对象

2. 有13种劫持操作

既然Proxy能解决以上两个问题，而且Proxy作为es6的新属性在vue2.x之前就有了，为什么vue2.x不使用Proxy呢？一个很重要的原因就是：Proxy是es6提供的新特性，兼容性不好，最主要的是这个属性无法用polyfill来兼容。

小 结

Vue 3.x 选择了使用 Proxy 替换 Object.defineProperty 的主要原因包括提供更好的响应性、‌性能优化、‌以及解决 Object.defineProperty 的局限性。‌

1、提供更好的响应性：‌Proxy 提供了更强大和灵活的拦截能力，‌可以拦截对象的读取、‌赋值、‌删除等操作，‌这使得 Vue 3.x 可以更方便地实现响应式系统。‌相比之下，‌Object.defineProperty 只能对已经存在的属性进行劫持，‌无法拦截新增的属性和删除的属性，‌这限制了其在处理动态属性变化时的能力1。‌

2、性能优化：‌Proxy 通常比 Object.defineProperty 更快，‌因为 Proxy 是原生 JavaScript 特性，‌而 Object.defineProperty 需要递归地遍历对象属性。‌这种性能上的优势在处理大规模数据时尤为明显，‌可以减少内存消耗和初始化时间12。‌

3、解决 Object.defineProperty 的局限性：‌Object.defineProperty 的使用有一些固有的限制，‌例如它基于属性级别的劫持，‌每个属性都需要被劫持，‌对于嵌套对象或数组来说，‌这可能导致性能下降。‌此外，‌它不支持对数组索引的直接监控，‌这意味着通过数组索引直接修改数组元素时无法实时响应13。‌

​​​​​​​4、跨平台兼容性：‌Proxy 和 Reflect 在浏览器和 Node.js 环境中都可用，‌这使得代码更容易跨平台使用。‌然而，‌这也带来了一个问题，‌即 Proxy 不兼容一些旧版本的浏览器，‌因此在这些浏览器中需要提供回退方案4。‌

5、学习曲线：‌对于新手来说，‌Proxy 和 Reflect 的学习曲线可能比 Object.defineProperty 更陡峭，‌因为它们更复杂。‌这要求开发者在项目中使用时需要更多的理解和实践。‌

综上所述，‌虽然 Proxy 带来了更好的响应性、‌性能和功能，‌但它也有不兼容旧浏览器和学习曲线较陡峭的局限性。‌开发人员在选择使用 Proxy 时需要根据项目的具体需求和目标权衡各种因素

二. 什么是Proxy

Proxy是 ES6 中新增的一个特性，翻译过来意思是"代理"，用在这里表示由它来“代理”某些操作。 Proxy 让我们能够以简洁易懂的方式控制外部对对象的访问。其功能非常类似于设计模式中的代理模式。

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

使用 Proxy 的核心优点是可以交由它来处理一些非核心逻辑（如：读取或设置对象的某些属性前记录日志；设置对象的某些属性值前，需要验证；某些属性的访问控制等）。 从而可以让对象只需关注于核心逻辑，达到关注点分离，降低对象复杂度等目的。

基本用法：

let p = new Proxy(target, handler);

参数：

target: 是用Proxy包装的被代理对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
handler: 是一个对象，其声明了代理target 的一些操作，其属性是当执行一个操作时定义代理的行为的函数。

p是Proxy对象，当其他操作对p进行更改的时候，会执行handler对象的方法。Proxy有13种数据劫持的操作，常用的handler处理方法：

get: 读取值，

set: 获取值，

has: 判断对象是否拥有该属性，

construct: 构造函数

举个例子：

let obj = {};
let handler = {
  get(target, property) {
    console.log(`${property} 被读取`);
    return property in target ? target[property] : 3;
  },
  set(target, property, value) {
    console.log(`${property} 被设置为 ${value}`);
    target[property] = value;
  },
};
let p = new Proxy(obj, handler);
p.name = "tom"; //name 被设置为 tom
p.age; //age 被读取 3

更多的Proxy属性方法参考：MDN Proxy

三. 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);
}

这段代码里把代理器返回的对象代理到this.$data，即this.$data是代理后的对象，外部每次对this.$data进行操作时，实际上执行的是这段代码里handler对象上的方法。

注：上面用到了reflect属性，这也是ES6里面的，不知道的去这儿看看吧：Reflect - JavaScript | MDN

补：Proxy使用示例

Proxy 在 ES2015 规范中被正式加入，它的支持度虽然不如 Object.defineProperty()，但其实也基本支持了 (除了 IE 和 Opera Mini 等少数浏览器)，所以使用起来问题也不太大。

针对对象

不需要对 keys 进行遍历。这解决Object.defineProperty() 的第二个问题.Proxy 是针对整个 obj 的。所以 obj 内部包含的所有的 key ，都可以走进 set。(省了一个 Object.keys() 的遍历)

let obj = {
  name: "qiilee",
  age: 18,
};
let handler = {
  get(target, key, receiver) {
    console.log("get", key);
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    console.log("set", key, value);
    return Reflect.set(target, key, value, receiver);
  },
};
let proxy = new Proxy(obj, handler);
proxy.name = "Zoe"; // set name Zoe
proxy.age = 18; // set age 18

支持数组

let arr = [1, 2, 3];
let proxy = new Proxy(arr, {
  get(target, key, receiver) {
    console.log("get", key);
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    console.log("set", key, value);
    return Reflect.set(target, key, value, receiver);
  },
});
proxy.push(4);
// 能够打印出很多内容
// get push     (寻找 proxy.push 方法)
// get length   (获取当前的 length)
// set 3 4      (设置 proxy[3] = 4)
// set length 4 (设置 proxy.length = 4)

 嵌套支持

let obj = {
  info: {
    name: "eason",
    blogs: ["webpack", "babel", "cache"],
  },
};
let handler = {
  get(target, key, receiver) {
    console.log("get", key);
    // 递归创建并返回
    if (typeof target[key] === "object" && target[key] !== null) {
      return new Proxy(target[key], handler);
    }
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    console.log("set", key, value);
    return Reflect.set(target, key, value, receiver);
  },
};
let proxy = new Proxy(obj, handler);
// 以下两句都能够进入 set
proxy.info.name = "Zoe";
proxy.info.blogs.push("proxy");

参考资料

Vue | Vue2.x和Vue3.x的双向绑定原理详解_烤地瓜CSDN博客

稍微学一下Vue的数据响应式(Vue2及Vue3区别)_Vue.js_脚本之家

为什么要替换 Object.defineProperty？_CSDN博客

前端每日一练：vue3 为什么要用 proxy 替换 Object.defineproperty ？