Vue 3 作为现代前端开发的主流框架，其核心优势在于高效的响应式系统和模块化设计。本文将从源码层面深度解析 Vue 3 的核心原理，重点剖析响应式系统的实现全过程，并结合实战场景提供应用技巧。文章将通过详细的代码示例和步骤说明，帮助开发者理解 Vue 3 的内部工作机制，从而提升开发效率和代码质量。
Vue 3 的整体架构概述
Vue 3 采用模块化设计，将核心功能拆分为多个独立的包，如
reactivity
（响应式系统）、
runtime-core
（运行时核心）、
compiler-core
（编译器核心）等。这种设计使得 Vue 3 更加灵活，支持自定义渲染器，并优化了 Tree-shaking 以减小包体积。核心原理基于“依赖收集”和“触发更新”的机制：当数据变化时，自动通知依赖的视图或计算函数进行更新。
在源码中，Vue 3 使用 TypeScript 编写，强调类型安全和可维护性。整个流程可以概括为：
定义响应式数据 → 收集依赖 → 数据变更 → 触发更新
。接下来，我们将重点剖析响应式系统，这是 Vue 3 的“心脏”。
关键模块介绍
Reactivity（响应式）
：处理数据的响应式转换和依赖管理。
Runtime-core（运行时核心）
：处理组件实例、渲染和生命周期。
Compiler-core（编译器核心）
：将模板编译为渲染函数。
Shared（共享工具）
：提供通用工具函数，如
isObject
、
extend
等。
这些模块通过
@vue/reactivity
等包暴露 API，开发者可以直接导入使用。例如，
reactive
和
ref
是响应式系统的核心 API。
响应式系统的核心原理
Vue 3 的响应式系统基于 ES6 的 Proxy 实现，这比 Vue 2 的 Object.defineProperty 更强大，能拦截对象的所有操作（如读取、设置、删除等），并支持数组和嵌套对象的深度响应式。核心原理是
依赖收集（Dependency Collection）
：在读取数据时收集依赖（如组件的渲染函数），在数据变更时触发这些依赖。
依赖收集的基本流程
创建响应式对象
：使用
reactive
或
ref
将普通数据转换为响应式对象。
读取数据（Get 操作）
：Proxy 拦截读取，记录当前的“活动依赖”（Active Effect）。
存储依赖
：将依赖存储在
WeakMap
中，键为响应式对象，值为依赖集合（Set）。
数据变更（Set 操作）
：Proxy 拦截设置，触发所有相关依赖。
Vue 3 使用
effect
函数来表示一个依赖（如渲染函数）。
effect
会自动追踪其内部读取的响应式数据。
为什么使用 Proxy？
性能更好
：Proxy 可以拦截整个对象，而不需要递归遍历属性。
支持新特性
：如
in
操作符、
ownKeys
（用于
for…in
循环）。
缺点
：不支持 IE，但 Vue 3 默认不支持 IE。
在源码中，
reactive
函数会创建一个 Proxy 对象，其 handler 包含
get
和
set
等陷阱（traps）。
源码实现全过程剖析
我们将通过模拟 Vue 3 源码的简化版本来剖析响应式系统的实现全过程。注意，实际源码更复杂，涉及边界处理和优化，但核心逻辑一致。以下代码基于 Vue 3 的
@vue/reactivity
包的简化实现。
步骤 1: 定义依赖存储结构
Vue 3 使用
WeakMap
存储响应式对象到依赖的映射，避免内存泄漏。源码中使用
targetMap
作为全局存储。
// 模拟全局依赖存储
const targetMap = new WeakMap(); // Key: 原始对象, Value: Map<属性名, Set
// 活动的 Effect（当前正在执行的依赖）
let activeEffect = null;
// Effect 函数：表示一个依赖
function effect(fn) {
const wrapper = () => {
activeEffect = wrapper; // 设置为活动 Effect
fn(); // 执行函数，会触发依赖收集
activeEffect = null; // 执行完毕，清除
};
wrapper(); // 立即执行一次以收集依赖
return wrapper;
}
解释
：
effect
包装用户函数，在执行时设置
activeEffect
，这样在 Proxy 的
get
陷阱中就能知道当前依赖谁。
步骤 2: 实现 reactive 函数
reactive
函数创建 Proxy，拦截
get
和
set
。
function isObject(val) {
return typeof val === ‘object’ && val !== null;
}
function reactive(target) {
if (!isObject(target)) return target; // 非对象直接返回
const handler = {
get(target, key, receiver) {
// 依赖收集：如果当前有活动 Effect，收集它
const res = Reflect.get(target, key, receiver);
if (activeEffect) {
// 获取或创建依赖 Map
let depsMap = targetMap.get(target);
if (!depsMap) {
depsMap = new Map();
targetMap.set(target, depsMap);
}
// 获取或创建属性对应的 Set
let deps = depsMap.get(key);
if (!deps) {
deps = new Set();
depsMap.set(key, deps);
}
// 添加当前 Effect
deps.add(activeEffect);
}
return res;
},
set(target, key, value, receiver) {
const oldValue = target[key];
const res = Reflect.set(target, key, value, receiver);
// 如果值变化，触发依赖
if (oldValue !== value) {
trigger(target, key);
}
return res;
}
};
return new Proxy(target, handler);
}
// 触发依赖函数
function trigger(target, key) {
const depsMap = targetMap.get(target);
if (!depsMap) return;
const deps = depsMap.get(key);
if (deps) {
deps.forEach(effect => effect()); // 重新执行所有依赖
}
}
详细说明
：
Get 陷阱
：使用
Reflect.get
获取值，同时如果
activeEffect
存在，就将它添加到
targetMap[target][key]
的 Set 中。这实现了依赖收集。
Set 陷阱
：使用
Reflect.set
设置值，比较新旧值，如果变化则调用
trigger
触发依赖。
为什么用 Reflect
：确保 Proxy 的默认行为正确，且支持元编程。
步骤 3: 处理嵌套对象和数组
Vue 3 的
reactive
会递归转换嵌套对象。在实际源码中，使用
__v_skip
标记跳过某些对象。对于数组，Proxy 会正确拦截
push
、
pop
等方法。
扩展上面的
reactive
，添加递归：
function reactive(target) {
if (!isObject(target)) return target;
// 如果已经是 Proxy，直接返回（避免重复代理）
if (target.__v_isProxy) return target;
target.__v_isProxy = true;
const handler = {
get(target, key, receiver) {
const res = Reflect.get(target, key, receiver);
// 递归：如果结果是对象，继续 reactive
if (isObject(res)) {
return reactive(res);
}
// 依赖收集逻辑…
if (activeEffect) {
// … 同上
}
return res;
},
// set 逻辑同上
};
return new Proxy(target, handler);
}
例子
：对于嵌套对象
const obj = reactive({ a: { b: 1 } })
，读取
obj.a.b
时，会先代理
obj
，然后在
get
中递归代理
obj.a
，确保深层响应式。
步骤 4: ref 的实现
ref
用于原始值（如数字、字符串），因为 Proxy 只能代理对象。
ref
内部使用一个对象
{ value: … }
来包装。
function ref(value) {
const wrapper = {
get value() {
// 依赖收集
if (activeEffect) {
// 类似 reactive 的收集逻辑，但针对 ‘value’ 属性
let depsMap = targetMap.get(wrapper);
if (!depsMap) {
depsMap = new Map();
targetMap.set(wrapper, depsMap);
}
let deps = depsMap.get(‘value’);
if (!deps) {
deps = new Set();
depsMap.set(‘value’, deps);
}
deps.add(activeEffect);
}
return value;
},
set value(newValue) {
if (value !== newValue) {
value = newValue;
// 触发依赖
const depsMap = targetMap.get(wrapper);
if (depsMap) {
const deps = depsMap.get(‘value’);
if (deps) {
deps.forEach(effect => effect());
}
}
}
}
};
return wrapper;
}
解释
：
ref
通过 getter/setter 模拟响应式，适合原始值。在 Vue 3 源码中，
ref
还支持
.value
的自动脱包（unref），但在实现中我们简化了。
步骤 5: 完整测试示例
让我们用一个完整例子测试上述模拟代码：
// 使用上面的 reactive 和 effect
const state = reactive({ count: 0 });
// 创建一个 Effect（模拟渲染函数）
let dummy = 0;
effect(() => {
dummy = state.count; // 读取 count，触发收集
});
console.log(‘初始 dummy:’, dummy); // 0
state.count = 1; // 触发 set，重新执行 effect
console.log(‘更新后 dummy:’, dummy); // 1
// 测试嵌套
const nested = reactive({ user: { name: ‘Alice’ } });
let name = ”;
effect(() => {
name = nested.user.name;
});
console.log(‘初始 name:’, name); // Alice
nested.user.name = ‘Bob’;
console.log(‘更新后 name:’, name); // Bob
输出
：
初始 dummy: 0
更新后 dummy: 1
初始 name: Alice
更新后 name: Bob
这个模拟展示了核心原理：依赖收集和触发。在实际 Vue 3 源码中，还有更多优化，如
track
和
trigger
函数的抽象、调度器（scheduler）支持异步更新、
computed
的惰性计算等。
源码中的高级特性
调度器（Scheduler）
：
effect
可以接受第二个参数
{ scheduler: fn }
，用于控制何时执行依赖，例如在
nextTick
中批量更新。
浅响应式（shallowReactive）
：只代理第一层，不递归。
只读（readonly）
：Proxy 的
set
陷阱抛出错误。
数组处理
：Proxy 拦截
length
和索引，Vue 3 重写了数组方法以触发更新。
在
packages/reactivity/src/effect.ts
中，
track
函数对应我们的依赖收集，
trigger
对应触发。
实战应用技巧
理解源码后，我们来看如何在实际项目中应用这些原理，提升性能和可维护性。
技巧 1: 合理使用 ref vs reactive
使用 reactive
：对于对象或数组，优先使用
reactive
，因为它更高效（Proxy 开销小）。
使用 ref
：对于原始值或需要传递的值，使用
ref
。例如，在组合式 API 中：
“`vue
{{ count }}
**技巧**：如果对象深层嵌套，使用 `reactive`；如果需要解构，使用 `toRefs` 将 reactive 转换为 ref：
“`javascript
const state = reactive({ count: 0, name: ‘Vue’ });
const { count, name } = toRefs(state); // count 和 name 是 ref
count.value++; // 响应式更新
技巧 2: 避免响应式陷阱
不要直接解构 reactive 对象
：解构会丢失响应式，因为 Proxy 只拦截原对象。
“`javascript
// 错误
const { count } = reactive({ count: 0 });
count++; // 不会更新视图
// 正确
const state = reactive({ count: 0 });
const { count } = toRefs(state);
count.value++;
– **处理异步更新**：Vue 3 默认批量更新，使用 `nextTick` 等待 DOM 更新。
“`javascript
import { nextTick } from ‘vue’;
state.count = 1;
await nextTick(); // 等待更新完成
console.log(‘DOM 已更新’);
技巧 3: 自定义响应式逻辑
基于源码原理，你可以扩展响应式系统。例如，实现一个自定义的
watch
：
function watch(source, callback) {
let oldValue;
effect(() => {
const value = typeof source === ‘function’ ? source() : source.value;
if (oldValue !== undefined) {
callback(value, oldValue);
}
oldValue = value;
});
}
// 使用
const count = ref(0);
watch(count, (newVal, oldVal) => {
console.log(`从 ${oldVal} 变为 ${newVal}`);
});
count.value = 1; // 输出: 从 0 变为 1
技巧 4: 性能优化
使用 shallowRef
：对于大对象，避免深层响应式。
const bigData = shallowRef({ deep: { nested: hugeObject } });
bigData.value = { deep: { nested: newHugeObject } }; // 只触发浅层更新
避免在循环中创建响应式
：在
v-for
中，使用
track
手动控制，或确保 key 唯一。
源码级优化
：在自定义渲染器中，使用
@vue/runtime-core
的
createApp
自定义更新逻辑。
技巧 5: 调试响应式
Vue DevTools 可以追踪响应式依赖，但理解源码后，你可以手动检查：
import { isReactive } from ‘vue’;
console.log(isReactive(state)); // true
在源码中，
isReactive
检查对象的
__v_isReactive
标记。
结论
通过本文的剖析，我们从源码层面理解了 Vue 3 响应式系统的实现全过程：基于 Proxy 的依赖收集与触发机制。核心代码模拟展示了
reactive
、
ref
和
effect
的工作原理。实战技巧帮助开发者避免常见陷阱，并优化应用性能。掌握这些知识，不仅能调试复杂问题，还能在需要时扩展 Vue 3 的功能。建议阅读 Vue 3 官方源码仓库（github.com/vuejs/core）以深入学习更多细节。如果你有特定场景的疑问，欢迎进一步讨论！