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 点）初始化卡顿明显缓解
