shallowReactive 和 shallowRef 是 Vue 3 的浅响应式 API，仅对数据顶层或 .value 引用做响应式追踪，不递归处理深层嵌套，适用于大型只读/整体替换场景以显著提升性能。

shallowReactive 和 shallowRef 是 Vue 3 中专为大规模数据设计的“轻量级响应式开关”——它们不递归代理深层结构，只在顶层做响应追踪，从而大幅降低 Proxy 创建数量、依赖收集开销和内存占用。

什么时候该用 shallowReactive

适合结构庞大、但更新集中在对象第一层的场景，比如树形列表的根节点、分页表格的 data 数组、配置对象的状态字段等。

• 你有 5000 条用户数据，但每次只整体替换 list = newData，从不修改 list[0].name 这类深层属性
• 模板中只用到 v-for="item in list" 或 {{ config.theme }}，不频繁读取 config.api.timeout.retry.count
• 深层嵌套（如 item.children、item.meta）基本只读，或仅在少数操作后手动刷新视图

什么时候该用 shallowRef

适合需要保留 .value 访问习惯、且数据类型可能混用（基础值 + 对象）的场景，尤其方便配合第三方实例或不可变大数据。

• 存储 echarts 实例、mapbox 地图对象、Three.js 场景等——它们内部属性不该被 Vue 代理，只需替换整个引用时触发更新
• 接收后端返回的巨型 JSON（如图表原始数据、日志数组），只做整体赋值，不修改内部字段
• 需要统一用 .value 赋值，又想避免对 shallowRef({}) 里的对象自动调用 reactive

关键操作要领

浅层响应式不是“无响应式”，而是把控制权交还给你。深层改动不会自动更新，但你可以精准干预：

• 对 shallowRef 修改了 .value 内部属性后，调用 triggerRef(ref) 强制刷新
• 对 shallowReactive 修改了深层字段后，直接重新赋值顶层对象，例如 state = { ...state, users: newUsers }
• 若某子结构确实需要响应式（如编辑中的某个 item），可单独对它调用 reactive(item)，按需增强
• 模板中避免写 {{ user.profile.address.city }} 这类深层访问；提前用 computed 暴露成顶层字段更安全

性能提升的实际表现

在真实项目中，合理使用这两个 API 后：

• 初始化 5000 条扁平列表，挂载耗时下降约 40%～60%
• 渲染含 200 个节点的折叠树组件，首次渲染内存分配减少约 1/3
• 大型可视化图表（如 ECharts 含 50 系列 × 1000 点）初始化卡顿明显缓解