shallowref 不响应内部属性变化是设计特性而非 bug，适用于大型静态数据；频繁修改内部属性需改用 ref/reactive 或用 triggerref 主动触发更新。
shallowRef 本身的设计目标就是“不响应内部属性变化”，所以它修改内部属性时不更新视图，不是 bug，而是特性。要避免这种“不更新”带来的问题，关键不是阻止它发生，而是**主动控制更新时机**——要么改用更适合的响应式方案，要么在需要时手动触发。
明确 shallowRef 的适用边界
它适合保存大型、静态或极少变更的结构化数据，比如：
- 图表渲染用的原始坐标数组（上万条点，但只整体替换）
- 从后端一次性拉取的配置对象（字段固定，运行中不增删改嵌套属性）
- 与第三方库（如 Mapbox、Three.js）共享的对象，你只负责传入，不期望 Vue 监听其内部变化
如果你频繁修改 内部属性（如 state.value.user.name = 'xxx'），又要求视图同步，那 shallowRef 就不是最佳选择。
替代方案：优先考虑 ref 或 reactive
大多数业务场景下，直接用 ref 更稳妥：
-
ref({ name: '张三', age: 25 })：修改.value.name会自动更新 -
reactive({ name: '张三', age: 25 })：无需 .value，直接obj.name = '李四'即可响应
只有当性能实测显示深层响应带来明显卡顿（例如对象嵌套深、属性极多、且更新频繁），才值得为 shallowRef 增加 triggerRef 的维护成本。
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
必须用 shallowRef 时：用 triggerRef 主动唤醒
当你确认要用 shallowRef，又不得不改内部属性，就靠 triggerRef 补救：
- 每次修改完内部属性后，立刻调用
triggerRef(yourShallowRef) - 它不关心改了什么，只通知 Vue：“这个 shallowRef 的值逻辑上变了，请重新收集依赖、更新视图”
- 注意：只对 shallowRef 有效，对 ref 或 reactive 不起作用
示例：userInfo.value.age++userInfo.value.city = '深圳'triggerRef(userInfo) // 缺少这行，页面不会变
更彻底的解法：整体替换 .value
如果数据结构允许，避开“改内部”这个动作本身：
- 不要写
state.value.items[0].done = true - 改为
state.value = { ...state.value, items: state.value.items.map(...)}
因为 shallowRef 对 .value 的重新赋值是完全响应的，不需要 triggerRef，语义也更清晰——你是在提供一个新快照，而不是修补旧对象。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
