Vue 响应式系统的那些秘密：你不知道的 reactive 内部机制

Vue 响应式系统是 Vue 框架的核心，但大多数开发者只停留在 ref 和 reactive 的表面用法。今天聊聊它背后几个不为人知的实现细节，帮你理解 Vue 响应式系统底层。

1. Proxy 拦截里的隐藏陷阱：`has` 和 `ownKeys`

Vue 3 用 Proxy 实现响应式，但 Proxy 除了 get、set，还有 has（in 操作符）和 ownKeys（Object.keys、for...in）的拦截。

这两个拦截会在组件模板或 watcher 依赖收集时触发，影响依赖跟踪。

举个例子：

js 复制代码

const obj = reactive({ a: 1 });

'a' in obj;        // 触发 has 拦截
Object.keys(obj);   // 触发 ownKeys 拦截

Vue 会把这些操作也作为依赖收集的触发点，用来追踪循环依赖或判断属性是否存在。

很多人忽略，Proxy 会拦截 Symbol 类型的属性访问。

Vue 会为内部实现挂载一些 Symbol 变量（比如用于标记是否是响应式对象，原始对象引用等）。

这些 Symbol 属性默认不会被模板渲染使用，但它们存在于响应式对象上，避免被误读是 Vue 的巧妙设计。

调用 reactive 只会代理第一层对象，嵌套对象是懒加载式代理。

也就是说，只有你访问到某个深层对象时，Vue 才会把它包成响应式。

示例：

js 复制代码

const obj = reactive({ nested: { foo: 1 } });
// 这里 obj.nested 还不是 reactive
const nested = obj.nested;  // 访问时，nested 才被代理

这个惰性代理设计，优化了性能，避免一次性递归包裹导致的性能浪费。

Vue 3 支持 ref 和 reactive 混合使用，reactive 会自动 unwrap 包含的 ref，方便直接访问。

js 复制代码

const r = ref(1);
const obj = reactive({ count: r });
console.log(obj.count); // 直接访问的是 r.value

这个 unwrap 是编译器和运行时联手实现的，非常智能。

响应式触发时，并不是立刻同步更新，而是走一套调度机制，支持异步更新和批量合并。

你可以给 effect 传入自定义 scheduler，比如 Vue 自身的 nextTick，保证多次修改只触发一次渲染。

这两个冷门 API 有助于调试和解决多层响应式嵌套引发的问题。

知道这些，能让你对 Vue 响应式系统有更深入的理解，写插件或者调试时更加游刃有余。谢谢大家🙂