shallowreactive用于创建仅第一层属性响应式的对象，适用于结构较深但只需顶层变化触发更新的场景，如表单状态、ui开关、动态props缓存等，避免深层代理性能开销。
shallowReactive 用于创建一个“浅层响应式”对象——只对第一层属性做响应式追踪，内部嵌套的对象、数组等不会被递归转为响应式。
什么时候该用 shallowReactive？
当你有一个结构较深的对象，但只关心顶层属性变化（比如配置项、状态开关），又想避免深层转换带来的性能开销时，shallowReactive 就很合适。常见于：表单顶层状态、UI 展开/折叠控制、动态 props 缓存对象等。
基本用法和对比 reactive
直接传入普通对象即可：
const state = shallowReactive({ a: 1, b: { c: 2 } })-
state.a = 3→ 触发视图更新（✅ 响应式） -
state.b.c = 4→ 不触发更新（❌ 非响应式） - 而
reactive({ b: { c: 2 } })中修改b.c是响应式的
注意事项和常见陷阱
它不递归，所以不能依赖嵌套数据的变更；也不能用 toRef 或 toRefs 解构深层属性（解构后失去响应性）。如果需要部分深层响应，可组合使用：
- 对特定嵌套字段手动用
reactive包裹：b: reactive({ c: 2 }) - 或配合
shallowRef+.value控制更新时机 - 注意：
shallowReactive返回的对象本身仍是响应式代理，但它的属性值不会自动升级为响应式
搭配 watch 和 computed 的建议
watch 默认监听浅层变化，适合配合 shallowReactive 使用；但若要监听 state.b.c，需显式写成 watch(() => state.b?.c, ...)，且前提是 b 本身是响应式对象（否则取不到变化）。computed 内部读取 shallowReactive 对象时，仅顶层变更会触发重新计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
