大家好，欢迎来到今天的 Vue 3 源码刨析小课堂！
今天咱们不聊宏大叙事，就聚焦两个小而美的 API：shallowReactive 和 shallowRef。别看它们名字里都带着 "shallow"（浅的），作用可不浅！它们就像 Vue 3 里的“轻量级战士”，专门负责在特定场景下优化性能。
咱们今天的目标就是搞清楚：
- 什么是响应式？为什么要响应式？（先打个基础，温故知新嘛）
shallowReactive和shallowRef到底解决了什么问题？ (痛点分析，对症下药)- 它们是如何通过 "shallow" 来实现优化的？ (核心原理，抽丝剥茧)
- 什么时候该用它们？什么时候不该用？ (实战指南，避免踩坑)
准备好了吗？Let’s dive in!
一、响应式：让数据流动起来
想象一下，没有响应式，你的 Vue 组件会是什么样子？
大概就是这样：
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
};
},
methods: {
increment() {
this.count++; // 数据变了！
// ... 手动更新 DOM 的代码，想想都可怕！
}
}
};
</script>每次 count 变化，你都得手动去更新 DOM。天哪，这简直回到了刀耕火种的年代！
响应式 就是来拯救你的。它能自动追踪数据的变化，并在数据变化时自动更新视图。Vue 3 的响应式系统基于 Proxy，简单来说，就是给你的数据对象套上一层“代理”，任何对数据的读写操作都会被这个代理拦截，然后通知 Vue 去更新视图。
// 一个简单的响应式例子 (简化版，别直接复制到 Vue 里用!)
const target = { count: 0 };
const handler = {
get(target, key, receiver) {
console.log(`Getting ${key}`);
return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
console.log(`Setting ${key} to ${value}`);
Reflect.set(target, key, value, receiver);
// 在这里触发视图更新！
return true;
}
};
const reactiveData = new Proxy(target, handler);
reactiveData.count = 1; // 控制台输出：Setting count to 1
console.log(reactiveData.count); // 控制台输出：Getting count; 1太棒了！有了响应式，我们就可以专注于数据逻辑，不用操心 DOM 更新的细节。
二、shallowReactive 和 shallowRef：性能优化的秘密武器
虽然响应式很好用，但它也有代价。每创建一个响应式对象，Vue 都会递归地将对象的所有属性都转换为响应式。如果你的对象结构非常深，或者包含大量的数据，这个过程可能会消耗大量的内存和 CPU 资源。
举个例子：
const deepData = {
level1: {
level2: {
level3: {
level4: {
name: 'Deep Data',
value: 123
}
}
}
}
};
const reactiveDeepData = reactive(deepData); // 这会递归地将所有属性都变成响应式在这个例子中，reactive(deepData) 会递归地将 level1、level2、level3、level4 甚至 name 和 value 都变成响应式的。但如果我们只需要 level1 的变化被追踪，而 level4 内部的数据变化并不需要触发视图更新，那岂不是浪费了？
这个时候，shallowReactive 和 shallowRef 就派上用场了。它们就像是响应式系统的“瘦身版”，只对对象的第一层属性进行响应式处理，而跳过深层嵌套的对象。
1. shallowReactive：浅层响应式对象
shallowReactive 会创建一个浅层响应式的对象。这意味着只有对象的第一层属性是响应式的，而深层嵌套的对象仍然是普通的 JavaScript 对象。
const shallowData = shallowReactive(deepData);
shallowData.level1 = { newLevel2: { value: 456 } }; // 触发更新
shallowData.level1.newLevel2.value = 789; // 不会触发更新 (因为 newLevel2 不是响应式的)在这个例子中，修改 shallowData.level1 会触发更新，因为 level1 是响应式的。但是，修改 shallowData.level1.newLevel2.value 不会触发更新，因为 newLevel2 不是响应式的。
2. shallowRef：浅层响应式引用
shallowRef 与 ref 类似，但它只追踪值的变化，而不追踪值内部属性的变化。它通常用于包装原始值或浅层对象。
const myObject = { name: 'My Object' };
const shallowObjectRef = shallowRef(myObject);
shallowObjectRef.value = { newName: 'New Object' }; // 触发更新 (因为 value 变了)
shallowObjectRef.value.newName = 'Another Object'; // 不会触发更新 (因为 value 内部的属性变了)在这个例子中，修改 shallowObjectRef.value 会触发更新，因为 value 的引用变了。但是，修改 shallowObjectRef.value.newName 不会触发更新，因为 value 内部的属性变化不会被追踪。
三、源码解析：shallowReactive 和 shallowRef 的 "浅" 原理
要理解 shallowReactive 和 shallowRef 的优化原理，我们需要稍微深入到 Vue 3 的源码里看一看。别怕，咱们只看关键部分，不会迷路的！
1. shallowReactive 的源码剖析 (简化版):
shallowReactive 的核心在于它使用的 Proxy 的 handler 对象。与 reactive 不同，shallowReactive 的 handler 不会递归地将深层嵌套的对象也转换为响应式。
// 源码简化版，仅用于演示原理
function shallowReactive(target) {
return new Proxy(target, {
get(target, key, receiver) {
// 仅仅追踪第一层属性的访问
track(target, key); // 追踪依赖 (省略 track 函数的实现)
return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
const oldValue = target[key];
const result = Reflect.set(target, key, value, receiver);
if (value !== oldValue) {
// 触发更新
trigger(target, key); // 触发更新 (省略 trigger 函数的实现)
}
return result;
}
});
}可以看到，shallowReactive 的 get 和 set 方法只负责追踪和触发第一层属性的依赖，而不会递归地处理深层嵌套的对象。
2. shallowRef 的源码剖析 (简化版):
shallowRef 的实现相对简单，它只是一个包含 value 属性的对象，并且只追踪 value 属性的变化。
// 源码简化版，仅用于演示原理
function shallowRef(value) {
return {
get value() {
track(this, 'value'); // 追踪依赖 (省略 track 函数的实现)
return value;
},
set value(newValue) {
if (newValue !== value) {
value = newValue;
trigger(this, 'value'); // 触发更新 (省略 trigger 函数的实现)
}
}
};
}可以看到，shallowRef 只追踪 value 属性的读取和设置，而不会追踪 value 内部属性的变化。
总结一下：
| 特性 | reactive |
shallowReactive |
ref |
shallowRef |
|---|---|---|---|---|
| 响应式深度 | 深层响应式：递归地将所有嵌套对象都转换为响应式 | 浅层响应式：只将第一层属性转换为响应式，深层嵌套对象保持不变 | 深层响应式 (如果 value 是对象)：如果 value 是对象，则递归地将所有嵌套对象都转换为响应式 | 浅层响应式：只追踪 value 值的变化，不追踪 value 内部属性的变化 |
| 适用场景 | 需要深层响应式追踪的复杂对象 | 只需要追踪对象的第一层属性，而不需要追踪深层嵌套对象的场景 (例如，大型数据结构中只有顶层属性需要响应式) | 原始值或者需要深层响应式追踪的对象 | 只需要追踪值的变化，而不需要追踪值内部属性变化的场景 (例如，包装一个大型对象，只需要在对象被替换时触发更新) |
| 性能 | 性能开销较高，因为需要递归地将所有属性都转换为响应式 | 性能开销较低，因为只处理第一层属性 | 性能开销较高 (如果 value 是对象)：如果 value 是对象，则需要递归地将所有属性都转换为响应式 | 性能开销最低，只追踪值的变化 |
| 内存占用 | 内存占用较高，因为需要存储所有响应式属性的依赖关系 | 内存占用较低，因为只存储第一层属性的依赖关系 | 内存占用较高 (如果 value 是对象)：如果 value 是对象，则需要存储所有响应式属性的依赖关系 | 内存占用最低，只存储 value 的依赖关系 |
| 使用注意事项 | 避免过度使用，只在真正需要深层响应式追踪的场景下使用 | 确保深层嵌套对象的状态变化不会影响视图更新，或者通过其他方式手动触发更新 | 避免将大型对象赋值给 ref，除非真的需要深层响应式追踪 | 注意：修改 shallowRef.value 内部的属性不会触发更新，需要手动替换 shallowRef.value 的值才能触发更新 |
| 例子 | const reactiveData = reactive({ a: { b: { c: 1 } } }); 修改 reactiveData.a.b.c 会触发更新 |
const shallowData = shallowReactive({ a: { b: { c: 1 } } }); 修改 shallowData.a 会触发更新，但修改 shallowData.a.b.c 不会触发更新 |
const count = ref(0); const obj = ref({ a: 1 }); 修改 count.value 和 obj.value.a 都会触发更新 |
const obj = { a: 1 }; const shallowObj = shallowRef(obj); 修改 shallowObj.value 会触发更新，但修改 shallowObj.value.a 不会触发更新 |
四、实战指南：什么时候该用，什么时候不该用？
既然 shallowReactive 和 shallowRef 这么好，是不是可以无脑用呢？当然不是！任何优化都应该建立在对应用场景的深刻理解之上。
1. 适合使用 shallowReactive 的场景：
- 大型数据结构，只有顶层属性需要响应式： 比如，你的组件需要处理一个包含大量数据的 JSON 对象，但你只需要追踪对象的某些顶层属性的变化，而不需要追踪深层嵌套属性的变化。
- 性能敏感的应用： 如果你的应用对性能要求非常高，并且你知道某些数据不需要深层响应式，那么使用
shallowReactive可以有效地减少内存占用和 CPU 消耗。 - 与第三方库集成： 有些第三方库可能会返回一些不适合进行深层响应式处理的对象。在这种情况下，可以使用
shallowReactive来包装这些对象，避免不必要的性能开销。
2. 适合使用 shallowRef 的场景：
- 包装原始值：
shallowRef非常适合包装原始值，比如数字、字符串、布尔值等。 - 包装大型对象，只需要追踪对象的替换： 如果你需要包装一个大型对象，但只需要在对象被替换时触发更新，而不需要追踪对象内部属性的变化，那么
shallowRef是一个不错的选择。 - 管理组件状态：
shallowRef可以用于管理组件的状态，比如组件的加载状态、错误信息等。
3. 不适合使用 shallowReactive 和 shallowRef 的场景：
- 需要深层响应式追踪的对象： 如果你的组件需要追踪对象的深层嵌套属性的变化，那么
shallowReactive和shallowRef就不适合了。 - 不确定数据结构是否需要深层响应式： 如果你不确定你的数据结构是否需要深层响应式，那么最好还是使用
reactive和ref，以避免出现意外的错误。 - 过度优化： 不要为了优化而优化。如果你的应用性能已经足够好，那么就没有必要使用
shallowReactive和shallowRef。
举几个更具体的例子：
- 表格组件： 一个表格组件通常需要处理大量的数据。如果表格数据只需要在整个数据源发生变化时才需要更新，那么可以使用
shallowReactive来包装表格数据。 - 配置对象： 一个配置对象通常包含大量的配置项。如果只需要在配置对象被替换时才需要更新，那么可以使用
shallowRef来包装配置对象。 - 表单组件： 一个表单组件通常需要追踪表单数据的变化。由于表单数据通常是深层嵌套的，因此不适合使用
shallowReactive和shallowRef。
五、总结：用 "浅" 赢取性能
shallowReactive 和 shallowRef 是 Vue 3 中两个非常有用的 API，它们可以帮助我们在特定场景下优化性能。但是，它们并不是万能的，我们需要根据实际情况选择合适的 API。
记住，优化不是目的，而是手段。我们的最终目标是构建一个高性能、可维护的 Vue 应用。希望今天的课程能帮助大家更好地理解 shallowReactive 和 shallowRef 的原理和使用场景，并在实际项目中灵活运用它们。
今天的课程就到这里，谢谢大家！下次有机会再和大家一起深入 Vue 3 源码的海洋！