shallowref和shallowreactive是vue3的浅响应式api，仅对数据第一层做响应式处理，适用于大型静态数据、第三方库实例引用及顶层状态管理等场景，可显著提升性能。

Vue 3 的 shallowReactive 和 shallowRef 是为特定性能瓶颈和使用边界设计的“轻量级响应式开关”，不是 ref/reactive 的替代品，而是补充。它们的核心价值在于：**明确放弃对深层结构的响应式追踪，从而节省内存、减少依赖收集开销、提升读写速度**。用对了，页面更顺；乱用，反而导致数据更新不触发、逻辑难调试。

shallowReactive：只让对象第一层属性“动起来”

它接收一个普通对象（或数组），返回一个代理对象，但仅对顶层 key 做响应式处理——修改 name、status、list 这些直接挂在对象上的属性会触发视图更新；而修改 user.profile.avatar 或 list[0].title 这类嵌套路径，完全不会通知组件重渲染。

• 适合表单顶层状态管理：比如一个包含几十个字段的大表单对象，你只关心“是否已填写”“提交按钮是否禁用”这类顶层开关，内部每个字段的实时变化无需响应式追踪
• 适合配置类对象：如图表配置项 { theme: 'dark', width: 800, options: { series: [...] } }，你只在切换主题或调整宽高时替换整个配置，options.series 内部结构稳定且不常动态修改
• 避免与第三方库冲突：某些库（如某些 Canvas 渲染器）会往实例上挂载大量内部状态属性，用 reactive 包裹可能引发意外代理行为，shallowReactive 只盯住你主动赋值的那几个关键字段即可

shallowRef：只监听 .value 的“换人”，不查它“家里有没有变”

它和 ref 表面相似，都带 .value，但本质不同：ref 对复杂值会自动调用 reactive 深度代理；shallowRef 则把 .value 当作一个黑盒，只在你执行 xxx.value = 新对象 这一整次赋值动作时才触发响应，内部任何属性修改（哪怕改了 xxx.value.data.items[5].checked）都静默无视。

React Best Practices 2 0.1.0

React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。

下载

• 适合存储大型静态数据：如后端返回的完整表格原始数据（上万行 JSON）、地图瓦片元信息、富文本编辑器的完整文档树——你只在分页切换、筛选重载时整体替换，从不现场修改某一行某个字段
• 适合保存第三方库实例引用：ECharts 实例、Mapbox GL 地图对象、WebGL 渲染上下文等，这些对象本身庞大且内部属性频繁变动，你只需确保“这个实例被替换了”能响应，不需要 Vue 去监听它内部 __zr、_layers 等私有属性的变化
• 需要手动刷新时用 triggerRef：如果确实要修改 shallowRef 内部属性并强制更新，别改完就完事，补一句 triggerRef(xxx)，这是它的显式更新契约

怎么选？看数据“动不动”和“怎么动”

判断一个数据要不要浅响应式，两个问题就够了：

• 它内部结构是否经常被零散修改（比如用户边输边改某个字段）？→ 需要深层响应 → 用 ref 或 reactive
• 它是否基本“整进整出”（加载一次、替换一次、很少局部改）？→ 浅响应式更合适 → 顶层对象选 shallowReactive，带 .value 访问习惯或需兼容基础类型选 shallowRef
• 它是不是一个你不该也不必管其内部细节的“黑箱”（如第三方实例、大体积只读数据）？→ 浅响应式是安全边界

容易踩的坑

这两个 API 强大，但误用代价明显：

• 别把 shallowReactive 对象嵌套在 reactive 里：外层 reactive 会尝试深度代理它，破坏浅响应式语义，还可能报错或行为异常
• 别指望 shallowRef 的 .value 是 reactive：给它赋一个对象后，不能像 ref 那样直接解构使用 xxx.value.name 并期望 name 改变触发更新
• 别在模板里过度依赖浅响应式数据的嵌套访问：{{ state.user.name }} 在 shallowReactive 下没问题，但 {{ state.user.profile.city }} 就不会响应——模板里出现这种写法，往往是设计信号：这里其实该用深层响应式，或该拆成独立状态

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！