Vue 3 的响应式系统在底层是如何工作的？

Question

Accepted Answer

Vue 3 的响应式建立在 JavaScript **Proxy** 之上。当你将状态变为响应式时，Vue 会用一个 Proxy 将其包裹，从而**拦截读取和写入**，让它能够**追踪**哪些 effect 依赖于哪些属性，并在数据变化时**触发**这些 effect 重新运行。

## 核心机制：读取时追踪（track），写入时触发（trigger）

```js
// a simplified mental model of reactive()
function reactive(target) {
  return new Proxy(target, {
    get(obj, key) {
      track(obj, key);          // record "the current effect depends on obj.key"
      return obj[key];
    },
    set(obj, key, value) {
      obj[key] = value;
      trigger(obj, key);        // re-run every effect that depended on obj.key
      return true;
    },
  });
}
```

读取一个属性会将当前正在运行的 effect **追踪**为一个依赖；写入它则会**触发**所有读取过它的 effect。这就是 Vue 如何*精确地*知道当某个特定属性变化时，要更新哪些组件渲染或 computed。

## effect 将这一切串联起来

```js
// component render, computed, and watchers all run inside an "effect"
effect(() => {
  document.body.innerHTML = count.value; // reading count.value tracks this effect
});
count.value++; // triggers the effect → it re-runs → DOM updates
```

当一个 effect 运行时，Vue 会将其标记为“激活”，这样在此期间任何响应式读取都会被关联回它。之后改变某个依赖，就只有受影响的 effect 会重新运行。

## 为什么 Proxy（Vue 3）优于 Object.defineProperty（Vue 2）

```js
// Vue 2 used Object.defineProperty per-property, which COULDN'T detect:
this.obj.newProp = 1;   // ❌ adding a new property (needed Vue.set)
this.arr[0] = 5;         // ❌ index assignment
this.arr.length = 0;     // ❌ length changes

// Vue 3's Proxy intercepts ALL operations, including new keys, deletes, and arrays ✅
```

Proxy 会拦截*整个对象*（任意 key、添加、删除、数组变更），消除了 Vue 2 广为人知的那些限制——不再需要 `Vue.set` 这样的变通方法。

## ref 与 reactive 在内部的区别

```text
reactive(obj) → returns a Proxy of the object
ref(value)    → returns an object { value } whose .value access is tracked
                (so primitives can be reactive — Proxies only wrap objects)
```

## 为什么这很重要

理解 track/trigger 的 Proxy 模型，解释了*为什么* Vue 如此高效（它只更新那些真正依赖于已变化数据的 effect——细粒度响应式），以及*为什么*旧的 Vue 2 限制曾经存在、又在 Vue 3 中消失了。

它还阐明了一些实用规则：为什么 `reactive` 需要对象（Proxy 无法包裹原始值，因此才有 `ref`），以及为什么对 `reactive` 进行解构会破坏追踪（你把值从 Proxy 的 get/set 拦截中剥离了出来）。