第 26 题：Vue2 和 Vue3 的响应式原理有什么区别？为什么 Vue3 要用 Proxy 替代 defineProperty？

好的，继续 **第 30 题（高频必考）**👇

这一题在 Vue 面试中几乎 100% 会问到。

---

第 30 题：Vue2 和 Vue3 的响应式原理有什么区别？为什么 Vue3 要用 Proxy 替代 defineProperty？

---

一、Vue2 的响应式原理（defineProperty）

Vue2 通过：

✔ Object.defineProperty()

✔ 对每个属性进行"劫持"

✔ 在 getter / setter 里收集依赖 & 触发更新

示例：

const obj = { name: 'Tom' };

Object.defineProperty(obj, 'name', {
  get() {
    // 依赖收集
    return value;
  },
  set(newVal) {
    // 通知更新
    value = newVal;
  }
});

---

Vue2 的问题（面试重点）

❌ 1. 只能监听已有属性（不能监听新增、删除）

vm.obj.newKey = xxx // 无法监听
delete vm.obj.xxx // 无法监听

必须：

• Vue.set()
• Vue.delete()

---

❌ 2. 数组变动监听有限

Vue2 不能检测：

arr[index] = value
arr.length = 10

只能 hack 7 个方法：

push / pop / shift / unshift / sort / reverse / splice

---

❌ 3. 每个属性都要递归劫持（初始化性能差）

对象嵌套越深 → defineProperty 递归越多 → 初始化越慢

---

---

二、Vue3 的响应式原理（Proxy + Reflect）

Vue3 使用：

✔ Proxy 劫持整个对象

✔ Reflect 做默认操作

✔ 完整监听：新增、删除、数组索引、长度变化

示例：

const obj = { name: 'Tom' };

const proxy = new Proxy(obj, {
  get(target, key, receiver) {
    // 依赖收集
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    // 通知更新
    return Reflect.set(target, key, value, receiver);
  }
});

---

Vue3 的优势（重点）

✔ 1. 对象的新增/删除可监听

proxy.newKey = 123   // 自动响应
delete proxy.name    // 自动响应

---

✔ 2. 数组索引 & length 变化可监听

proxy[1] = 99    // 响应式
proxy.length = 10  // 响应式

---

✔ 3. 性能更高

• Proxy 不需要递归遍历所有属性
• 按需监听（访问才会收集依赖）
• 内存占用更小

---

✔ 4. 支持 Map、Set、WeakMap、WeakSet（Vue2 做不到）

const s = reactive(new Set());
s.add(1);  // 响应式

---

✔ 5. 更好支持 TS、静态分析、编译优化（Vue3 的核心）

---

三、为什么 Vue3 使用 Proxy 替代 defineProperty？（总结能拿高分）

因为 defineProperty 本质上只能劫持对象的属性，而不能劫持对象本身，所以无法监听动态新增属性、删除属性、数组索引变化等情况；同时递归遍历所有属性的初始化性能也较差。Proxy 则可以直接劫持整个对象，并能完美监听所有读写、增加、删除、数组操作等行为，性能更优、更灵活，并支持更复杂的数据结构（如 Map/Set）。

---

四、背诵版（15 秒快速回答）

Vue2 使用 defineProperty 通过 getter/setter 劫持属性，但无法监听新增/删除属性和数组索引，需要 Vue.set 才能触发更新；并且初始化需要递归所有属性，性能较差。

Vue3 使用 Proxy 直接代理整个对象，能监听所有操作，包括新增、删除、数组索引变更，并能支持 Map/Set 等复杂结构，且实现更简单、性能更高，因此 Vue3 放弃了 defineProperty。

---

需要继续 第 31 题：事件循环（Event Loop）详细版 吗？（浏览器 vs Node.js）

这也是前端面试的王炸题 🔥