vue shallowRef 与 shallowReacitive
shallowRef 和 shallowReactive 是 Vue 3 提供的两个用于创建浅层响应式数据的 API，它们在处理嵌套数据结构时与 ref 和 reactive 有本质区别，主要优势在于性能优化。以下从核心概念、原理、使用场景和关键差异等方面进行对比总结。
核心概念与原理
- shallowRef：创建一个浅层响应式的引用。它只对
.value属性的顶层赋值操作进行响应式追踪，如果.value是引用类型（如对象或数组），其内部的嵌套属性不会被转换为响应式，修改深层属性不会触发视图更新。12- 原理：通过
Object.defineProperty监听.value的赋值，但不会递归代理深层结构。
- 原理：通过
- shallowReactive：创建一个浅层响应式对象。它只对对象顶层属性的访问和修改进行代理（通过 Proxy），但嵌套的对象或数组保持原始状态，修改深层属性不会触发响应式更新。13
- 原理：Proxy 仅拦截顶层属性的
get/set操作，深层属性直接返回原始值。
- 原理：Proxy 仅拦截顶层属性的
主要特性对比
| 特性 | shallowRef | shallowReactive |
|---|---|---|
| 响应式范围 | 仅.value的顶层赋值触发更新（如ref.value = newObj） | 仅对象顶层属性触发更新（如obj.key = 1） |
| 深层属性修改 | 修改.value.nested.key = 1不触发更新 | 修改obj.nested.key = 1不触发更新 |
| 支持的数据类型 | 支持基本类型和引用类型 | 仅支持对象或数组（传入基本类型静默失效）1 |
| 性能特点 | 避免对深层嵌套结构进行响应式转换，适合大型数据优化 | 减少递归代理开销，提升复杂对象的渲染效率23 |
使用场景与示例
- shallowRef 的典型场景：
- 管理基本类型值（如计数器），此时行为与
ref一致，但可用于统一 API 风格。 - 处理大型对象（如复杂表单或配置），仅需在整体替换时触发更新，避免频繁代理。
- 进阶用法：配合
triggerRef()手动触发深层修改后的更新，例如批量修改对象内部属性后强制刷新视图。
- 管理基本类型值（如计数器），此时行为与
- shallowReactive 的典型场景：
- 渲染大数据列表（如商品数据），仅需响应顶层属性（如选中状态），避免递归代理深层细节。
- 与第三方库集成时，传递原始对象避免 Vue 响应式系统干扰其内部修改。
关键差异与注意事项
- 数据类型处理：
shallowRef可包装任意类型，而shallowReactive仅对对象/数组生效。 - 性能优化重点：两者均通过浅层代理减少响应式追踪开销，但适用场景不同——
shallowRef更适合值类型或整体替换，shallowReactive侧重对象结构的顶层响应。 - 潜在陷阱：避免将浅层响应式嵌套在深层响应式对象中，否则会导致响应行为不一致，增加调试难度。
如何选择？
- 若需响应整个对象的替换（如切换配置），优先使用
shallowRef。 - 若需响应对象顶层属性的变化（如更新用户信息），优先使用
shallowReactive。 - 对于深层嵌套修改频繁的场景，仍应使用
ref或reactive以确保自动追踪。