Proxy为什么比Object.defineProperty更高效？

YuXiang

Vue 3 使用 Proxy 替代 Vue 2 中的 Object.defineProperty 来实现响应式系统，主要是因为 Proxy 在性能、功能和灵活性方面具有显著优势。

1. 性能优化

defineProperty 的局限性

初始化开销：在 Vue 2 中，初始化时需要遍历整个对象并递归设置响应式，这会导致较大的初始化性能开销。
深度嵌套对象的性能问题：defineProperty 需要递归遍历对象的所有属性，并为每个属性单独设置 getter 和 setter。对于嵌套对象，需要深度遍历，性能开销较大。
无法处理复杂的数据结构（如函数、Symbol 类型的属性）：defineProperty 不能很方便地处理函数类型的属性，特别是对于返回的值是函数的对象，或者属性本身是 Symbol 类型时，响应式系统会失效。
无法监听对象的新增属性：defineProperty 只能设置已存在的属性的 getter 和 setter，但它不能直接监听新增的属性。也就是说，当你通过 obj.newProp = value 向对象动态添加新属性时，Vue 2 无法自动让这个新属性变成响应式。
不能删除属性时触发响应：使用 delete 删除对象属性时，defineProperty 不会触发视图更新。也就是说，当你删除对象的某个属性时，Vue 2 的响应式系统不会通知视图进行更新。
数组支持有限：defineProperty 对数组的支持有限，无法直接监听数组的索引变化（如 arr[0] = 1）和长度变化（如 arr.length = 0）。虽然 Vue 会重写一些数组方法（如 push、pop、shift、unshift、splice 等）来处理数组的变化，但对于像 reverse、sort 这样的原生数组方法，Vue 不能直接通过 defineProperty 来捕获它们的变化。

Proxy 是如何处理这些局限性

动态拦截：Proxy 能够直接拦截对象上的所有操作，包括对对象的新增属性的操作。当给对象添加新属性时，Proxy 会拦截到 set 操作并自动处理，从而使新增的属性也变成响应式。由于 Proxy 能够捕获所有的操作，它能让你对对象的新增、删除或修改的属性做出响应，而无需额外的 API（如 Vue.set）。
数组支持：Proxy 通过对数组的操作进行全面的拦截，能够捕获数组索引的变化、数组长度的修改以及其他数组操作。通过 Proxy，Vue 3 可以在数组的任何操作（例如索引变动、数组长度调整等）发生时做出反应。
懒加载：Proxy 使用懒代理（Lazy Proxy）机制。Proxy 可以逐级拦截对象的操作，只会在属性被访问时才触发拦截。这样，Vue 3 不需要在对象初始化时遍历整个对象进行递归设置响应式，而是采用按需代理。嵌套层级深的对象也不会因为递归遍历而导致性能问题，只有需要访问某个嵌套属性时，才会创建相应的代理。只有当某个属性被访问或修改时，才会触发 Proxy 的拦截器，避免了 Vue 2 中遍历整个对象的性能瓶颈。

2. 功能更强大

defineProperty 的局限性

无法拦截新增属性：defineProperty 只能拦截已经定义的属性，无法拦截新增属性（如 obj.newProp = value）。
无法拦截删除操作：defineProperty 无法拦截属性的删除操作（如 delete obj.prop）。
无法拦截数组索引操作：defineProperty 无法直接拦截数组的索引操作（如 arr[0] = value）。

Proxy 的优势

拦截所有操作：Proxy 可以拦截对象的几乎所有操作，包括：
- 属性访问
- 属性赋值
- 新增属性
- 删除属性
- 数组索引操作
- 长度变化
- 遍历操作
动态响应：Proxy 可以动态响应对象的变化，无需预先定义属性。

3. 代码简洁性和可维护性

defineProperty 的局限性

代码复杂：defineProperty 需要为每个属性单独设置 getter 和 setter，代码量较大，尤其是在处理嵌套对象时。
维护困难：由于需要递归遍历对象并手动设置响应式，代码的可读性和可维护性较差。

Proxy 的优势

代码简洁：Proxy 通过统一的拦截器处理所有操作，代码更加简洁。
易于扩展：Proxy 的拦截器可以轻松扩展，支持更多操作类型。
逻辑集中：所有拦截逻辑集中在 Proxy 的 handler 中，便于维护和调试。

4. 性能对比示例

defineProperty 的性能瓶颈

const obj = {};
Object.defineProperty(obj, 'prop', {
  get() {
    console.log('get prop');
    return this._prop;
  },
  set(value) {
    console.log('set prop');
    this._prop = value;
  },
});

obj.prop = 1; // 触发 set
console.log(obj.prop); // 触发 get

每次访问或修改属性时都会触发 getter 和 setter，但对于新增属性或删除属性无法拦截。

Proxy 的性能优势

const obj = new Proxy({}, {
  get(target, key) {
    console.log(`get ${key}`);
    return target[key];
  },
  set(target, key, value) {
    console.log(`set ${key}`);
    target[key] = value;
    return true;
  },
  deleteProperty(target, key) {
    console.log(`delete ${key}`);
    delete target[key];
    return true;
  },
});

obj.prop = 1; // 触发 set
console.log(obj.prop); // 触发 get
delete obj.prop; // 触发 delete

Proxy 可以拦截所有操作，包括新增属性、删除属性等，性能更高且功能更强大。

5. 总结对比

特性	defineProperty	Proxy
初始化性能	需要递归遍历对象，初始化开销较大	懒加载，初始化性能更高
拦截操作	只能拦截已定义属性的 get 和 set	可以拦截所有操作（包括新增、删除等）
数组支持	需要额外处理数组方法	直接支持数组索引操作和长度变化
代码复杂度	代码复杂，维护困难	代码简洁，易于扩展和维护
兼容性	支持 IE9+	不支持 IE，支持现代浏览器