Vue reactive 底层 Proxy 完整流程（依赖收集 + 触发更新）

reactive 底层原理完整版（面试压轴题）

我给你讲最标准、最易懂、面试直接满分 的 reactive 底层原理，包含：
Proxy + Reflect + 依赖收集 track + 触发更新 trigger + 深度响应式

全程人话，不绕弯。

---

一、一句话终极结论

reactive = 深度 Proxy 代理 + get 收集依赖 + set 触发更新
Vue3 响应式的核心就是：拦截 → 收集 → 触发

---

二、reactive 底层 4 步流程

1. 把对象变成 Proxy 代理对象

reactive 接收一个对象，返回一个 Proxy 实例。

const user = reactive({ name: "zs" })

底层：

new Proxy(target, {
  get(target, key, receiver) {},
  set(target, key, value, receiver) {},
  deleteProperty(target, key) {}
})

---

2. get 时：依赖收集 track()

当渲染页面、computed、watch 读取数据时：

user.name

触发 Proxy 的 get，执行：

1. 用 Reflect.get 获取值
2. 调用 track 收集当前副作用（组件更新函数）
3. 如果值是对象 → 递归 reactive（深度响应）

---

3. set 时：触发更新 trigger()

当修改数据时：

user.name = "ls"

触发 Proxy 的 set，执行：

1. 用 Reflect.set 设置值
2. 调用 trigger 通知所有收集到的副作用
3. 组件重新渲染

---

4. 深度响应式原理

Proxy 默认只代理第一层 ，但 Vue3 在 get 里做了一件事：
拿到属性值 → 如果是对象 → 自动递归 reactive

所以任何层级修改都能响应。

---

三、超精简流程图

读取属性 → get 拦截 → track 收集依赖
↓
修改属性 → set 拦截 → trigger 触发更新
↓
组件重新渲染

---

四、为什么要用 Reflect？

面试必问！

答案：

1. 保证 this 指向正确
2. 返回操作是否成功的布尔值
3. 和 Proxy 配合最标准

Reflect.get(target, key, receiver)

---

五、reactive 底层核心总结（背这个）

1. reactive = Proxy 实现对象拦截
2. get = track 收集依赖
3. set = trigger 触发更新
4. 深度响应 = get 时递归代理子对象
5. 只能代理对象，不能代理基本类型
6. 配合 Reflect 保证正确操作

---

六、面试满分答案（直接背）

问：Vue3 reactive 响应式原理？

答：
reactive 底层使用 ES6 Proxy 代理对象，通过 get 拦截进行依赖收集，set 拦截进行更新触发。
在 get 中使用 track 收集组件渲染副作用，在 set 中使用 trigger 通知依赖更新。
如果子属性是对象，会在读取时递归生成 reactive，实现深度响应式。
内部使用 Reflect 完成属性操作，保证 this 指向正确。

---