shallowReactive创建仅顶层属性响应的对象：state.a修改触发更新，state.b.c修改不触发；适用于外层稳定、顶层字段频繁变更且内层静态的场景。
用 shallowReactive 创建浅层响应式对象，核心就一点：只让对象第一层属性具备响应性，内部嵌套对象保持“普通”状态，不被 Vue 的响应式系统追踪。
什么时候该用 shallowReactive
适合外层结构稳定、但顶层字段频繁变动的场景。比如一个配置对象，整体结构不变，但开关状态、主题色、是否启用等顶层字段经常切换；而深层的默认值、模板结构、静态 schema 不会动态修改，也不需要监听变化。
- 数据本身嵌套很深，但实际只改最外层字段（如
isActive、theme） - 性能敏感，避免对大量静态嵌套对象做 Proxy 包装和依赖收集
- 你明确知道内层属性不会被直接修改，或修改后会整体替换（这时用
shallowRef更合适）
怎么写才生效
直接导入并传入一个普通对象，返回的就是浅响应式代理。注意：它不带 .value，用法和 reactive 一样，是“对象直用”风格。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 导入：
import { shallowReactive } from 'vue' - 创建：
const state = shallowReactive({ a: 1, b: { c: 2 } }) - 访问：
state.a—— 响应式，改它会更新视图 - 修改嵌套：
state.b.c = 3—— 不触发更新，b还是普通对象
和 reactive、shallowRef 的关键区别
别混用，选错会影响响应行为：
立即学习“前端免费学习笔记（深入）”；
-
vs reactive：后者会递归把
b也变成响应式，改b.c也能触发更新；前者只盯住a和b这两个顶层键 -
vs shallowRef：后者必须通过
.value访问，且整个值是引用级响应（替换data.value = newObj才触发）；shallowReactive是对象级、无.value、顶层赋值即响应
常见误操作提醒
容易踩坑的地方：
- 不要试图对
shallowReactive返回的对象解构 —— 解构后变量脱离响应式代理，修改无效 - 如果确实要改嵌套属性并希望触发更新，得手动调用
triggerRef（但它只对shallowRef有效）；shallowReactive没有对应强制触发 API，此时应考虑换用reactive或整体替换字段 - 模板中直接用
{{ state.xxx }}没问题，但别在watch里监听state.nested.xxx—— 它不会变化，watch 也收不到
