shallowRef 是避免深层响应式转换的引用封装机制，仅追踪 .value 本身变更，不劫持内部属性，适用于大对象整体替换场景。
Vue.js 中的 shallowRef 并不是“浅层劫持”，而是一种**避免深层响应式转换的引用封装机制**。它不劫持内部对象属性，只让 .value 本身可被追踪，从而显著降低初始化和更新时的性能开销——特别适合大型、深层嵌套但仅需整体替换的场景。
shallowRef 的核心行为：只响应 .value 的变更
与 ref() 不同，shallowRef() 不会对赋给 .value 的对象执行 reactive() 处理：
-
ref({ a: { b: 1 } })→ 内部a.b被递归转为响应式，任何嵌套修改都会触发更新 -
shallowRef({ a: { b: 1 } })→.value是普通对象，.value.a.b = 2不触发视图更新；只有.value = 新对象才会通知依赖
适用场景：大对象整体替换，而非细粒度响应
典型用例包括：
- 第三方库返回的复杂数据（如图表配置、富文本内容树），你只关心“整个配置是否换了”，不监听其中某个字段
- 从 API 获取的大型列表或树形结构，渲染时仅做一次性快照展示，后续只通过重新赋值更新整份数据
- 避免对
JSON.parse()得到的原始数据自动深度代理，节省内存与初始化时间
配合 shallowReadonly 实现更安全的只读优化
若数据仅用于展示且不应被修改，可组合使用：
立即学习“前端免费学习笔记（深入）”；
const config = shallowReadonly(shallowRef(initialConfig))- 既阻止了深层响应式开销，又禁止了对
.value及其任意层级的写操作（开发环境报错） - 比
readonly(ref(...))更轻量，因为后者仍会对初始值做一次reactive封装
注意边界：别误用在需要嵌套响应的逻辑中
如果模板或计算属性依赖了 .value 内部字段（例如 {{ state.value.user.name }}），而你用了 shallowRef，那么 user.name 改变将不会刷新视图——此时应改用 ref 或对关键子对象单独用 shallowRef + 显式更新。
简单判断：是否只靠 .value = ... 触发重渲染？是 → 适合 shallowRef；否 → 需要深层响应能力。
