外观

Vue3 响应式原理

约 5846 字

Vue原理

Vue 3 响应式基于 Proxy 拦截对象的 get/set，在 get 中通过全局 activeEffect 将副作用函数收集到 WeakMap<target, Map<key, Set<effectFn>>> 依赖桶中，在 set 中取出依赖并触发更新；通过 cleanup 机制每次执行前清除旧依赖、重新收集，避免过期依赖。相比 Vue 2 的 Object.defineProperty，Proxy 能直接拦截属性增删与数组操作，支持惰性深层代理。ref 则通过 .value 的 getter/setter 将基本类型也纳入这套体系。

非响应式

一般的 JavaScript 对象不会追踪数据更新。当它被改变时，依赖它的副作用函数完全不知情。

const obj = {
  name: "张三",
  age: 18,
};

function changeAge() {
  document.body.innerHTML = obj.age;
}

changeAge();

setTimeout(() => {
  obj.age = 19; // 1 秒后 age 改变，但视图不会更新
}, 1000);

上面的例子中，虽然 obj.age 被改变了，但函数 changeAge 并不知道它改变，因此不会重新执行，视图就无法更新。如果我们能够拦截一个对象属性的读取和修改，就能在数据变化时主动通知依赖方，实现响应式。

Vue 2 的响应式

Object.defineProperty 拦截

Vue 2 的响应式核心是 Object.defineProperty。它允许我们为对象的每个属性定义 getter 和 setter，从而拦截对该属性的读取与赋值。

在这个基础上，Vue 2 在 setter 中触发视图更新，在 getter 中收集依赖（即 Watcher），就实现了一个基本的响应式系统。

Vue 2 响应式的不足

Vue 2 的方式存在几个难以规避的问题：

  1. 无法检测属性的添加和删除。 Vue 2 在初始化时会对 data 中已声明的属性逐一调用 Object.defineProperty，把这些属性转为 getter/setter。因此之后动态添加的新属性不会被劫持，需要用 Vue.set / Vue.delete 来补这个能力。
const state = { name: "张三" };
// 将 state 变为响应式后，新增 age 属性：
state.age = 18; // Vue 2 无法检测到这次变更

  1. 无法直接监听数组索引和 length 变化。 通过索引修改数组元素（arr[0] = 'x'）或直接修改 length，Object.defineProperty 无法拦截。Vue 2 通过重写数组的 7 个变异方法（push、pop、shift 等）来绕过这一限制，但直接索引赋值仍然无法检测。

  2. 初始化时需要递归遍历所有属性。 对象层级越深，初始化开销越大。即使某些深层属性从未被访问，也会在初始化时被劫持。

const hugeData = {
  level1: {
    level2: {
      level3: {
        // ... 很多深层数据
      }
    }
  }
};
// Vue 2 在初始化时会递归遍历所有嵌套属性，逐一调用 Object.defineProperty

这些不足的根本原因在于：Object.defineProperty 是对属性的操作，而非对对象的操作。它无法感知对象结构的变化（增删属性）和数组索引操作。

为什么 Vue 2 没有修复这些问题？ 这些不足的根源在于：Object.defineProperty 只能对单个属性做劫持，而且必须在初始化时就逐个属性调用。它本身无法感知对象结构的变化（增删属性）和数组索引操作，因此用同一套 API 很难彻底解决这些问题。Vue 3 改用 Proxy，正是为了突破 ES5 的能力上限。

Vue 3 的响应式

Vue 3 使用 Proxy 替代 Object.defineProperty 作为响应式的核心机制。

Proxy 是 ES6 新增的 API。它可以创建一个对象的代理，拦截对该对象的任何操作——不仅是属性读写，还包括属性删除、in 操作符、for...in 遍历等，共 13 种拦截行为。

与 Object.defineProperty 的根本区别在于：Proxy 代理的是整个对象，而非单个属性。这意味着新增属性、删除属性、数组索引操作都能被拦截。

创建 Proxy 对象

这样，新增 gender 属性也能被 set 拦截，这是 Object.defineProperty 做不到的。

添加副作用函数

当数据变化时，需要在 set 中执行相应的副作用函数（更新视图）。我们用 Set 暂存副作用函数，在 get 中收集、在 set 中触发。

这个例子展示了响应式最核心的工作原理：读取时收集依赖，写入时触发更新。

但这里有一个问题：副作用函数 effect 是硬编码的。真实场景中，副作用函数可能是匿名函数，也可能有多个。我们需要一个通用的注册机制。

注册副作用函数

Vue 3 中定义了一个 effect 函数来统一注册副作用函数。它用一个全局变量 activeEffect 来标记 " 当前正在执行的副作用函数 "，这样 Proxy 的 get 中就能知道该收集谁。

// 全局变量，存储当前正在执行的副作用函数
let activeEffect = null;

// effect 函数：注册并立即执行副作用函数
function effect(fn) {
  // 包装一层，在 fn 执行前将 activeEffect 指向自己
  const effectFn = () => {
    activeEffect = effectFn;
    fn(); // 执行 fn 时访问响应式数据，触发 get，get 中将 activeEffect 收集为依赖
  };
  // 立即执行一次，完成初始的依赖收集
  effectFn();
}

使用时只需将副作用函数传入 effect：

effect(() => {
  document.body.innerText = proxyData.name;
});

effect 执行后，activeEffect 被设置为包装后的 effectFn，然后执行传入的 fn。fn 中访问了 proxyData.name，触发 get，此时 get 中拿到的 activeEffect 正是这个 effectFn，于是将它收集起来。

以下是按照你要求的“层层递进”顺序优化后的三个章节。内容在原文基础上调整了结构，将 track 和 trigger 分别在依赖收集和触发更新章节末尾封装好，再在深层响应式章节自然地使用它们，同时补全了 Reflect 和 receiver 的说明。

依赖收集

上面的例子用单个 Set 存储所有副作用函数，这会导致一个问题：修改 name 时，依赖 age 的副作用函数也会执行，因为此时 effectFns 记录的副作用函数并没有记录它依赖于哪一个属性。

为此，需要建立 响应式对象 → 属性 → 副作用函数 的映射关系。Vue 3 使用如下数据结构：

WeakMap<target, Map<key, Set<effectFn>>>
层级类型说明
第一层WeakMapkey 是响应式对象（target），value 是 depsMap
第二层Mapkey 是属性名，value 是 deps
第三层Set存储所有依赖该属性的副作用函数

为什么外层用 WeakMap？

WeakMap 的 key 是弱引用，不会阻止垃圾回收。当响应式对象在外部没有其他引用时，它能被自动回收，避免内存泄漏。如果用 Map，被代理的对象即使已经没有用处了，也仍然被 Map 引用着，无法被 GC 回收。

将上述结构融入 Proxy，得到：

这段代码里，get 拦截器中的依赖收集逻辑可以封装成一个独立的 track 函数，让后续的代码复用：

于是 Proxy 的 get 可以简化为：

get(target, key) {
  track(target, key); // 收集依赖
  return target[key];
}

至此，依赖收集的核心逻辑已经被提取为 track 函数，完成属性的副作用函数收集。

依赖清理

考虑下面的场景：

effect(() => {
  // ok 为 true 时读取 text，为 false 时只读取 name
  document.body.innerText = obj.ok ? obj.text : obj.name;
});

当 obj.ok 为 true 时，副作用函数依赖 ok 和 text。当 obj.ok 变为 false 后，text 不再被读取，但它的依赖关系仍然保留着。此后修改 obj.text 时，这个副作用函数仍会被执行 —— 而此时 text 的值根本用不到。这就是 " 过期 " 依赖：曾经被依赖、但现在已不相关的副作用关系。

这些过期依赖不仅浪费性能，长期累积还可能导致内存问题。解决方法是在副作用函数每次执行前，先清空它之前的所有依赖关系，然后在执行过程中重新建立依赖。

// 清理函数：将 effectFn 从它关联的所有 deps 中移除
function cleanup(effectFn) {
  // effectFn.deps 是一个数组，存储了所有包含该 effectFn 的 Set
  for (let i = 0; i < effectFn.deps.length; i++) {
    const deps = effectFn.deps[i];
    deps.delete(effectFn);
  }
  // 清空记录
  effectFn.deps.length = 0;
}

修改 effect 函数，在执行 fn 之前先调用清理，并为 effectFn 挂载 deps 数组：

function effect(fn) {
  const effectFn = () => {
    // 每次执行前，先清除已有的所有依赖关联
    cleanup(effectFn);
    activeEffect = effectFn;
    fn();
  };
  // 挂载 deps 数组，用于记录该 effectFn 被哪些 Set 所包含
  effectFn.deps = [];
  effectFn();
}

由于 JavaScript 中函数也是对象，所以我们可以直接在 effectFn 上添加自定义属性 deps。

这样一来，track 函数中 activeEffect.deps.push(deps) 就会顺利地将依赖集合记录到 effectFn.deps 数组中。每次重新执行时，旧的依赖被清除，新的依赖重新建立，保证依赖集合始终是最新的。

触发更新

“触发更新”是指数据变更后，如何一步步通知到所有依赖方并最终反映到视图上。完整流程如下：

数据变更（set）
  → Proxy 的 set 拦截器
    → trigger(target, key)
      → 从 bucket 取出 depsMap
        → 从 depsMap 取出 key 对应的 effects Set
          → 遍历 effects，逐一执行 effectFn
            → 每个 effectFn 重新执行传入的 fn
              → fn 中更新 DOM / 执行其他副作用

这个流程的核心是 trigger 函数，我们可以将之前 set 中的逻辑封装为：

有了 trigger，Proxy 的 set 就可以写成：

set(target, key, value) {
  target[key] = value;
  trigger(target, key); // 触发依赖更新
  return true;
}

trigger 在 Vue 3 源码中的职责更复杂，包括：

  • 取出目标 key 的所有副作用函数
  • 支持数组 length 变更相关的额外触发逻辑
  • 支持 for...in 遍历相关的 ITERATE_KEY 依赖触发
  • 根据调度器（scheduler）决定副作用函数的执行时机，实现 nextTick 批处理等异步更新策略

深层响应式

有了 track 和 trigger，我们就可以进一步实现能代理嵌套对象的 reactive 函数。

在此之前，需要先了解 Reflect。Reflect 是 ES6 提供的内置对象，它拥有一系列与 Proxy 拦截器一一对应的静态方法（如 Reflect.get、Reflect.set、Reflect.deleteProperty 等）。与直接使用 target[key] 相比，使用 Reflect 方法的核心优势在于：可以传递 receiver。receiver 是 get/set 拦截器的第三个参数，它指向发起当前操作的代理对象 ，从而保证对象内部的 this 指向代理对象，而不是原始对象**。

考虑一个场景：原始对象内部有 getter，且 getter 中访问了 this 上的属性。

const raw = {
  firstName: '张',
  lastName: '三',
  get fullName() {
    return this.firstName + this.lastName;
  }
};
const state = reactive(raw);

当读取 state.fullName 时，fullName 的 getter 会执行，并访问 this.firstName 和 this.lastName。如果我们在 get 拦截器里写 return target[key]，this 将指向原始对象 raw，后续对 firstName 的读取不会触发代理的 get 拦截，依赖无法被收集。而使用 Reflect.get(target, key, receiver) 会将 receiver（即代理对象 state）作为 getter 的 this 传入，确保 this.firstName 再次经过代理，依赖收集正常运作。set 同理。

明白了这些之后，来看 reactive 的完整实现：

这样，访问 state.nested.count 时，每一层的对象都会被自动包装为响应式代理，深层属性的变更也能被检测到。整个响应式系统的核心骨架至此搭建完成。

基本类型的响应式

Proxy 只能代理对象（引用类型），无法直接代理基本类型（string、number、boolean 等），因为基本类型是按值传递的，本身没有属性可供拦截。

要让基本类型变成响应式，需要将它包装成一个对象：

// ref 的实现思路：将基本类型装入对象
function ref(rawValue) {
  // 创建一个包含 value 属性的普通对象
  const wrapper = {
    value: rawValue,
  };
  // 将这个对象变为响应式
  return reactive(wrapper);
}

当访问 refValue.value 时，实际是在访问响应式对象的 value 属性，get 拦截器就能正常工作；修改 refValue.value 时，set 拦截器也能触发更新。

Vue 3 中 ref 的实际实现没有直接使用 reactive，底层通过 .value 的 getter/setter 实现，内部遇到对象会复用 reactive。

也就是说，ref(对象) 在底层等价于 reactive(对象)，只不过多了一层 .value 的包装。

Reactive vs Ref

区别

对比维度reactiveref
适用类型对象、数组、Map、Set 等引用类型任意类型（基本类型 + 引用类型）
访问方式直接访问属性：state.count通过 .value：count.value
模板中使用直接使用：{{ state.count }}自动解包：{{ count }}（无需 .value）
解构后失去响应式保持响应式（每个 ref 是独立的）
替换整个值Object.assign 逐属性赋值直接赋值 ref.value = newVal
传递方式传递对象引用传递 ref 对象本身（.value 可独立替换）

关键差异举例：

// reactive：解构会丢失响应式
const state = reactive({ count: 0, name: "vue" });
const { count, name } = state; // count 和 name 已经不再是响应式的

// ref：每个 ref 是独立响应式单元，可以单独传递
const count = ref(0);
const name = ref("vue");
const { value: c } = count; // c 不是响应式，但 count 仍是
// reactive：不能整体替换
let state = reactive({ count: 0 });
state = reactive({ count: 1 }); // 创建了新对象，旧的依赖关系断裂

// ref：可以整体替换 .value
const count = ref(0);
count.value = 1; // 仍然是同一个 ref 对象，依赖关系不变

差异的原因

  1. reactive 的响应式建立在对象本身。

    它是通过 Proxy 直接代理目标对象，拦截的是对象属性的操作。因此必须始终操作同一个代理对象，解构或替换都意味着脱离了这个 Proxy。

    const raw = { count: 0 };
const state = reactive(raw);
// state 是 raw 的 Proxy 包装
// state.count → 触发 Proxy 的 get
// 解构后：const { count } = state → count 只是一个普通数字 0，与 Proxy 无关

  2. ref 的响应式建立在包装器对象上。

    ref 创建的是一个带 getter/setter 的包装器对象，.value 是唯一的数据出入口。

    const count = ref(0);
// count 本身是 { get value() {...}, set value(val) {...} }
// count.value → 触发 getter → track(count, 'value')
// count.value = 1 → 触发 setter → trigger(count, 'value')

    由于响应式附着在 ref 对象本身 而非内部值上，传递 ref 对象就意味着传递响应式能力，内部值可以随意替换。

  3. 模板中 ref 的自动解包。

    模板编译时，Vue 会检测到 ref 对象，自动为其追加 .value。reactive 对象则直接访问其属性，不存在解包步骤。

    模板：{{ count }}
编译后大致等价于：{{ count.value }}

区别总结：

  • reactive：Proxy 代理整个对象，响应式绑定在对象本体上，不能解构、不能整体替换
  • ref：包装器对象持有 .value 入口，响应式绑定在包装器上，可以自由替换 .value，也正因如此才需要 .value 来访问

实现一个简单的响应式系统

下面实现一个包含 reactive、ref、effect 的简易响应式系统，代码可直接运行。

这个实现覆盖了响应式系统的核心机制：依赖收集（track）、派发更新（trigger）、依赖清理（cleanup）、深层代理（reactive 递归）、基本类型包装（ref）。它与 Vue 3 真实源码的主要差异在于：缺少调度器（scheduler）、computed/watch 等衍生 API、readonly/shallowReactive 等变体，但作为理解响应式原理的起点已经足够。

学习参考资料：Vue 3 深入响应式系统

拓展阅读：虚拟 DOM 和 DIFF 算法