shallowReactive 的性能优势在于不递归代理深层属性，仅对第一层做响应式追踪，显著降低内存占用和初始化耗时，适用于顶层频繁变动、深层极少修改的大数据场景。
shallowReactive 的性能优势不在“快一点”，而在于“不递归、不代理深层属性”——它只对第一层属性做响应式追踪，跳过所有嵌套对象的 Proxy 包装和依赖收集。这对大数据结构（如成千上万条记录的列表、深度嵌套的配置树）能显著减少内存占用和初始化耗时。
避免深层 Proxy 创建，节省内存与初始化时间
普通 reactive 遇到对象会递归遍历所有属性，为每个嵌套对象创建独立的 Proxy + reactive effect 依赖系统。一个含 1000 个子对象的数组，可能触发上万个 Proxy 实例；而 shallowReactive 只给顶层对象加一层 Proxy，内部所有子对象保持原样（非响应式），不触发任何嵌套代理逻辑。
- 初始化耗时从 O(n) 降为 O(1)，n 是总嵌套节点数
- 内存中 Proxy 实例数量锐减，GC 压力明显降低
- 适用于“只读展示+顶层更新”的场景，比如表格数据源、树形菜单配置
适合“表层变动频繁、深层极少修改”的数据模式
典型例子：后台返回的用户列表 users: [{ id, name, profile: { avatar, bio } }]。你常更新 users[i].name 或增删整个用户项，但几乎不动 users[i].profile.bio。这时用 shallowReactive，既能让 users 数组长度变化、元素替换被侦测，又避免为每个 profile 创建无意义的响应式开销。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 深层字段（如 user.profile.avatar）修改不会触发视图更新 —— 这是设计取舍，不是 bug
- 若需局部深层响应，可对特定子对象单独调用 reactive()，按需增强
- 配合 shallowRef 使用，可统一管理“浅层响应 + 深层惰性响应”策略
与 toRaw / markRaw 配合，进一步规避无谓代理
如果数据中包含大量第三方类实例、DOM 元素或已带自有状态的对象，它们不该也不需要被 Vue 响应式系统接管。shallowReactive 不会深入处理这些值，但仍建议显式用 markRaw 标记：
- markRaw 确保该值及其后代完全跳过响应式转换（即使后续被 shallowReactive 包裹）
- 例如：shallowReactive({ list: markRaw(largeThirdPartyDataSet) })
- toRaw 可在必要时安全获取原始对象，避免 Proxy 带来的访问开销或调试干扰
替代方案对比：shallowRef vs readonly vs custom handler
不是所有大数据都该用 shallowReactive。选型要看读写需求：
- shallowRef：适合大对象作为整体被替换（如 chartData.value = newBigDataSet），比 shallowReactive 更轻量
- readonly + shallowReactive：组合使用可实现“表层可变、深层只读”，防止误改嵌套字段
- 自定义 Proxy handler（不用 Vue 响应式）：极端性能场景下，用事件/发布订阅手动触发更新，彻底脱离 Vue 响应式系统
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
