一、什么是shallowRef和shallowReactive
在Vue3的Composition API中，除了常用的ref和reactive函数外，Vue还提供了两个特殊的响应式API：shallowRef和shallowReactive。它们的特点是非深度响应，用于特定的性能优化场景。
1.1 核心概念
- shallowRef：只对基本类型数据进行响应式处理，对于对象类型，只监听
.value的变化，不监听对象内部属性的变化。 - shallowReactive：只对对象的第一层属性进行响应式处理，不递归处理嵌套对象。
二、为什么需要shallow API
2.1 深度响应的性能问题
- ref和reactive的深度监听：默认情况下，
ref和reactive会递归地将所有嵌套对象都转换为响应式，这在处理大型复杂数据结构时会带来性能开销。 - 不必要的响应式：在某些场景下，我们并不需要对所有层级的数据都进行响应式处理，尤其是那些不会改变或不需要UI同步的深层数据。
- 性能优化：对于大型数据结构，使用浅响应式可以显著减少内存使用和提高渲染性能。
三、shallowReactive的使用
3.1 基本用法
姓名：{{ user.name }}
年龄：{{ user.profile.age }}
3.2 特征和限制
- 只响应第一层：
shallowReactive只会对对象的第一层属性进行响应式处理。 - 深层属性修改：修改深层属性不会触发UI更新，但数据本身会被修改。
- 强制更新：
shallowReactive不支持triggerRef，如需在修改深层属性后触发更新，需要替换整个对象或改用shallowRef配合triggerRef。
3.3 适用场景
- 大型静态数据：当你有一个很大的对象，但只需要其中一小部分属性是响应式的。
- 第三方库数据：当你使用第三方库返回的数据，且不需要对其进行深度响应式处理。
- 性能敏感场景：在需要频繁更新数据的场景下，减少响应式开销。
四、shallowRef的使用
4.1 基本用法
基本类型：{{ count }}
对象类型 - 姓名：{{ user.name }}
对象类型 - 年龄：{{ user.age }}
4.2 特征和限制
- 只监听.value：
shallowRef只监听.value的变化，对于对象内部属性的变化不敏感。 - 基本类型正常：对于基本类型数据，
shallowRef的行为与ref相同。 - 对象类型特殊：对于对象类型，只有替换整个对象时才会触发更新。
4.3 适用场景
- 频繁更新的基本类型：如计数器、开关状态等。
- 大型对象：当你有一个大型对象，但只需要在替换整个对象时触发更新。
- 与triggerRef配合：在需要时手动触发更新。
五、shallowRef与ref的对比
| 特性 | ref | shallowRef |
|---|---|---|
| 基本类型处理 | 响应式 | 响应式 |
| 对象类型处理 | 深度响应式 | 只监听.value变化 |
| 性能开销 | 较高（深度监听） | 较低（浅监听） |
| 适用场景 | 大多数情况 | 大型对象或只需要替换整个对象的场景 |
六、shallowReactive与reactive的对比
| 特性 | reactive | shallowReactive |
|---|---|---|
| 响应深度 | 深度响应式 | 只响应第一层 |
| 性能开销 | 较高（递归转换） | 较低（只处理第一层） |
| 适用场景 | 大多数情况 | 大型对象或只需要第一层响应的场景 |
七、shallowRef和shallowReactive的高级使用技巧
7.1 手动触发更新
用户信息：{{ user.name }} - {{ user.age }}
7.2 与readonly配合使用
7.3 性能优化场景
7.3.1 场景1：大型表格数据
7.3.2 场景2：复杂配置对象
八、常见陷阱和解决方案
8.1 忘记shallowRef的非深度特性
问题：修改shallowRef包装的对象内部属性时，UI不更新。
解决方案：
- 使用
triggerRef手动触发更新 - 或使用普通
ref（如果需要深度响应） - 或替换整个对象
8.2 混淆shallowReactive和reactive
问题：在需要深度响应的场景下使用了shallowReactive，导致深层属性修改不触发更新。
解决方案：
- 明确区分使用场景
- 对于需要深度响应的数据，使用
reactive - 对于只需要第一层响应的数据，使用
shallowReactive
8.3 性能优化过度
问题：在不需要性能优化的场景下使用了shallow API，增加了代码复杂度。
解决方案：
- 优先使用普通的
ref和reactive - 只在确实需要性能优化的场景下使用shallow API
- 进行性能测试，确认优化效果
九、最佳实践
- 默认使用ref和reactive：在大多数情况下，使用默认的深度响应式API。
- 按需使用shallow API：只在以下场景使用：
- 处理大型数据结构
- 数据结构深度较深
- 只有部分属性需要响应式
- 性能敏感的场景
- 明确注释：在使用shallow API时，添加注释说明原因和使用注意事项。
- 结合triggerRef：在需要时使用
triggerRef手动触发更新。 - 测试验证：在使用shallow API后，测试确保功能正常且性能得到提升。
十、代码优化建议
10.1 合理选择响应式API
// 优化前：对于大型对象使用reactive
const largeData = reactive({
// 大型嵌套对象
});
// 优化后：对于大型对象使用shallowReactive
const largeData = shallowReactive({
// 大型嵌套对象
});10.2 结合computed使用
import { shallowRef, computed } from "vue";
const user = shallowRef({
name: "张三",
age: 25,
});
// 使用computed处理派生状态
const isAdult = computed(() => user.value.age >= 18);10.3 批量更新策略
import { shallowRef, triggerRef } from "vue";
const data = shallowRef({
// 大量数据
});
// 批量修改
function batchUpdate() {
// 多次修改深层属性
data.value.items.forEach(item => {
item.status = "processed";
});
// 最后手动触发一次更新
triggerRef(data);
}十一、总结
shallowRef和shallowReactive是Vue3提供的性能优化工具，它们通过减少响应式系统的开销来提高应用性能。正确使用这些API可以显著改善大型应用的性能，但需要注意它们的局限性：
- shallowRef：只监听
.value的变化，适用于基本类型和需要整体替换的对象。 - shallowReactive：只响应第一层属性，适用于大型对象且只需要第一层响应的场景。
在实际开发中，应该根据具体场景选择合适的响应式API，在性能优化和代码可维护性之间找到平衡。
