triggerRef 必须用于 shallowRef 内部属性被修改后手动触发更新，仅接受 shallowRef 实例为参数，调用需在属性修改之后；对 ref 或 reactive 无效，整值替换 .value 时也无需使用。
triggerRef 是 Vue 3 中专为 shallowRef 设计的手动更新 API，用来解决“改了内部属性但视图不刷新”的问题。
什么时候必须用 triggerRef？
只有在以下情况才需要它：
- 你用
shallowRef()包裹了一个对象（比如大型配置、Canvas 实例、DOM 元素） - 后续没有替换整个
.value，而是直接修改它的某个属性，例如：state.value.count++或config.value.apiKey = 'new' - Vue 默认不会响应这类改动——因为
shallowRef只监听.value的赋值，不追踪内部变化
怎么调用才有效？
必须严格满足两个条件：
- 参数只能是
shallowRef实例本身，不能传.value或普通对象 - 调用时机要在修改完属性之后、视图需要刷新之前
✅ 正确写法：
const data = shallowRef({ x: 1, y: 2 })<br>
data.value.x = 100<br>
triggerRef(data) // 触发依赖更新
❌ 错误写法：triggerRef(data.value) 或 triggerRef({}) —— 不起作用
和普通 ref / reactive 有什么区别？
不用 triggerRef 的场景其实更常见：
立即学习“前端免费学习笔记（深入）”；
-
ref({ a: 1 })和reactive({ a: 1 })天然支持深层响应，改.a会自动刷新 -
shallowRef是性能取舍：适合大对象、第三方实例等不需要深度追踪的场景 - 如果你改的是整个
.value（如data.value = { a: 2 }），Vue 自动响应，也不需要triggerRef
容易踩的坑
常见误区要避开：
- 对
ref或reactive对象调用triggerRef—— 完全无效 - 把它当成强制重渲染组件的工具（类似已废弃的
forceUpdate）—— 它只通知依赖该shallowRef的部分 - 在异步回调里修改后忘了调用，比如定时器或事件处理函数中更新了
canvasState.value.width却漏掉triggerRef(canvasState)
