vue3为什么要用proxy api 代替 defineProperty api？ -岩石教程

1. 对整个对象的全面代理

Proxy 可以拦截和处理对整个对象的操作，而不仅仅是对属性的操作。这意味着可以监听和处理所有类型的操作，如属性的读取、写入、删除等。而 Object.defineProperty 只能监听对象中已存在的属性，无法监控新增或删除属性。

例子：

使用 Proxy 监听新增和删除属性：

const handler = {
  set(target, key, value) {
    console.log(`Setting property ${key} to ${value}`);
    target[key] = value;
    return true;
  },
  deleteProperty(target, key) {
    console.log(`Deleting property ${key}`);
    delete target[key];
    return true;
  }
};

const obj = new Proxy({}, handler);
obj.a = 10;    // Setting property a to 10
delete obj.a;  // Deleting property a

2. 处理数组和对象更灵活

Proxy 可以对数组操作进行代理，能够监控和拦截诸如 push、pop、shift 等所有数组方法的操作。这对于响应式系统至关重要，因为数组是常见的数据结构，而 Vue 2 无法直接监听数组的这些操作，只能对数组的特定索引进行代理。

例子：

使用 Proxy 监听数组操作：

const arr = new Proxy([], {
  get(target, prop) {
    console.log(`Getting index ${prop}`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`Setting index ${prop} to ${value}`);
    target[prop] = value;
    return true;
  }
});

arr.push(1);  // Setting index 0 to 1
arr[1] = 2;   // Setting index 1 to 2

3. 支持更丰富的拦截操作

Proxy 提供了丰富的拦截操作，除了 get 和 set 外，还包括 has、deleteProperty、ownKeys、defineProperty、getOwnPropertyDescriptor 等。这样可以更全面地控制对象的行为。

4. 不需要遍历所有属性

使用 Object.defineProperty 创建响应式对象时，需要遍历对象的所有属性，并对每个属性进行绑定。这不仅效率低，而且无法处理动态新增的属性。而 Proxy 可以在对象被访问时才进行拦截，不需要提前遍历属性，从而大幅提高性能。

5. 避免深度监听

Proxy 可以避免对对象进行深度监听，因为它可以在嵌套属性被访问时动态地进行代理。这意味着即使是深层嵌套的对象结构，也可以在访问时自动进行响应式代理，而不需要一开始就对整个对象树进行代理。

6. 支持更多类型的数据

Proxy 可以轻松地代理复杂的数据类型，比如函数和类，这使得 Vue 3 的响应式系统可以更广泛地适用于各种数据结构。

缺点

使用 Proxy 作为 Vue 3 响应式系统的基础有其显著的优点，但也存在一些缺点。使用 Proxy 作为 Vue 3 响应式系统的基础有其显著的优点，但也存在一些缺点。以下是详细的优缺点分析：

1. 兼容性问题

Proxy 是 ECMAScript 2015 (ES6) 引入的特性，不支持在旧版浏览器（如 IE11 及以下）中运行。因此，Vue 3 无法在这些环境下使用响应式系统，这可能需要额外的兼容性处理或降级方案。

2. 性能问题

虽然 Proxy 在很多场景下比 Object.defineProperty 性能更好，但在某些高频率数据操作的情况下，Proxy 的开销可能会增加，尤其是在复杂的代理逻辑和大量属性的对象上。这要求开发者在设计和使用时注意性能优化。

示例 1：高频率数据访问

当一个对象被频繁地读写时，Proxy 的拦截器（如 get 和 set）会频繁执行。这些操作虽然对单次访问来说开销不大，但在高频场景下可能累积成为性能瓶颈。

const handler = {
  get(target, prop) {
    console.log(`Getting property ${prop}`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`Setting property ${prop} to ${value}`);
    target[prop] = value;
    return true;
  }
};

const obj = new Proxy({ a: 1 }, handler);

// 高频访问属性
for (let i = 0; i < 100000; i++) {
  obj.a; // 触发get拦截器
  obj.a = i; // 触发set拦截器
}

在这个例子中，如果我们有一个对象被高频率地读取和写入，Proxy 的 get 和 set 拦截器会被频繁调用。虽然单次拦截的开销很小，但在高频操作下，这些调用的累积开销可能会影响性能。

示例 2：大量数据处理

当我们代理一个包含大量属性的对象或数组时，Proxy 拦截每个属性的访问和修改操作，这可能会导致显著的性能开销。

const largeArray = new Proxy(new Array(1000000).fill(0), {
  get(target, prop) {
    return target[prop];
  },
  set(target, prop, value) {
    target[prop] = value;
    return true;
  }
});

// 批量操作数组
for (let i = 0; i < largeArray.length; i++) {
  largeArray[i] = i;
}

在这个例子中，我们使用 Proxy 来代理一个包含百万元素的数组。对于每一个数组元素的访问和修改，Proxy 都会触发 get 和 set 拦截器。这种情况下，拦截器的频繁调用可能会带来性能开销。

3. 调试困难

由于 Proxy 可以拦截多种操作并动态改变对象的行为，它可能会导致代码行为难以预测，增加了调试的复杂性。开发者需要额外的调试工具和技术来跟踪和理解 Proxy 的行为。

4. 学习曲线

对于不熟悉 Proxy 的开发者来说，理解和使用这种机制可能需要一定的学习成本，尤其是在处理复杂的拦截逻辑时。

5. 无 polyfill 支持

由于 Proxy 的底层实现机制，无法通过 polyfill 完全模拟其行为。因此，针对不支持 Proxy 的环境，需要额外的降级处理策略。

总结

Proxy 在 Vue 3 中的引入带来了响应式系统的显著改进，使得框架能够更高效、灵活地处理复杂数据操作。然而，开发者在使用时也需要考虑兼容性和性能问题，并准备好处理可能增加的调试复杂度。