Vue3的Proxy响应式为什么比Vue2的defineProperty更好

Vue 的响应式系统是其核心功能之一，它决定了数据变化如何自动触发视图更新。从 Vue2 升级到 Vue3，最底层的变化就是将 Object.defineProperty 替换为了 Proxy。这不仅是语法的升级，更是能力的跃迁。

1. 理解核心机制：拦截器的差异

在深入代码之前，先理解两者的本质区别。Vue2 的 defineProperty 像给每个房间单独装锁，而 Vue3 的 Proxy 像在整栋楼门口装保安。

Vue2 的模式：属性劫持

Vue2 必须遍历对象中的每一个属性，单独为其添加 get 和 set 方法。

Vue3 的模式：对象代理

Vue3 直接包裹整个对象，只要有人对对象进行任何操作（读、写、删除、查找等），门口的“保安”都会第一时间拦截。

2. 实战演练：Vue2 的局限性

Vue2 的 defineProperty 存在两个无法忽视的痛点：数组监测困难和属性添加/删除无响应。

步骤 1：体验数组索引修改失效

打开浏览器的控制台，复制并运行以下 Vue2 风格的模拟代码：

function defineReactive(data, key, val) {
  Object.defineProperty(data, key, {
    get() {
      console.log(`读取属性: ${key}`);
      return val;
    },
    set(newVal) {
      console.log(`设置属性: ${key} 为 ${newVal}`);
      val = newVal;
    }
  });
}

const vm = {};
defineReactive(vm, 'list', [1, 2, 3]);
```

**执行**以下命令尝试修改数组：

```javascript
vm.list[0] = 99; // 试图修改第一项
console.log(vm.list[0]); // 读取第一项
```

**观察**控制台输出：你会发现没有触发 `set` 方法。这意味着 Vue2 无法直接检测到通过索引修改数组的操作。

### 步骤 2：体验新增属性失效

继续**运行**以下代码：

```javascript
vm.newProp = '新属性';
console.log(vm.newProp);
```

**观察**控制台：虽然属性被添加了，但没有触发 `set` 拦截。这是因为 `defineProperty` 必须在初始化时就“劫持”属性，后来者无法享受响应式服务。

---

## 3. 实战演练：Vue3 的全能拦截

Vue3 的 `Proxy` 可以拦截对象上的 13 种操作，完美解决了上述问题。

### 步骤 1：构建 Proxy 拦截器

**打开**新的控制台标签页，**输入**以下 Vue3 风格的代码：

```javascript
const handler = {
  get(target, key, receiver) {
    console.log(`Proxy 读取: ${key}`);
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    console.log(`Proxy 设置: ${key} 为 ${value}`);
    return Reflect.set(target, key, value, receiver);
  }
};

const data = new Proxy({ list: [1, 2, 3] }, handler);

步骤 2：验证数组和新增属性的响应

执行之前在 Vue2 中失效的操作：

// 1. 修改数组索引
data.list[0] = 99;

// 2. 读取数组
console.log(data.list[0]);

// 3. 新增属性
data.newProp = '新属性';

// 4. 删除属性 (defineProperty 完全做不到)
delete data.list;

观察控制台输出：所有操作（读、写、增、删）都被 handler 准确捕获并打印了日志。这就是为什么 Vue3 不再需要 $set` 和 `$delete 这两个 API。

4. 性能提升：惰性代理

除了功能更强大，Proxy 还带来了巨大的性能优化，主要体现在初始化速度和内存占用上。

Vue2 的负担：递归遍历

Vue2 在初始化数据时，必须递归遍历对象的所有层级，为每个属性都添加 defineProperty。

如果有一个深层嵌套的对象，其初始化时间复杂度与属性总数呈线性关系。我们可以用公式表示其时间成本：

$$ T_{init} \propto \sum_{i=1}^{N} C_{i} $$

其中 $N$ 是所有层级的属性总数。

Vue3 的优势：按需代理

Vue3 只在初始化时代理第一层属性。当你访问到一个深层属性（如 data.a.b）时，如果 b 是个对象，Vue3 才会立刻将 b 转换为 Proxy。

这种机制被称为“惰性代理”。

• 场景：有一个巨大的数据对象，但页面只渲染了其中 5% 的数据。
• Vue2：不得不浪费时间去处理那 95% 暂时用不到的数据。
• Vue3：只处理那 5% 用到的数据，剩下的 95% 完全不消耗性能。

下面的流程图展示了两者在处理嵌套对象时的差异：

5. 综合对比总结

为了更直观地展示差异，请参考下表对比：

6. 结论与操作建议

基于上述分析，在日常开发中，如果你正在维护 Vue2 项目，务必遵守以下规则以避免响应式失效：

1. 避免直接通过索引修改数组项，使用 Vue.set(vm.items, indexOfItem, newValue) 替代。
2. 避免直接给对象赋值新属性，使用 this.obj = { ...this.obj, newProp: 1 } 或 Object.assign，或者调用 Vue.set。

如果正在开发新项目，直接选择 Vue3。你不再需要关心响应式系统的底层陷阱，代码将更加简洁且性能更高。