triggerRef 用于手动触发 shallowRef 或 shallowReactive 的更新，适用于直接修改其内部属性而 Vue 无法自动追踪的场景，如修改 canvasState.value.width 后需调用 triggerRef(canvasState)。
triggerRef 用于手动触发 shallowRef 或 shallowReactive 创建的浅层响应式对象的更新，适用于你明确知道数据已变更、但 Vue 无法自动追踪的场景。
什么时候必须用 triggerRef？
当你使用 shallowRef 包裹一个对象（比如大型配置、第三方库实例、DOM 元素），且后续直接修改了该对象的属性（而非整体替换 ref.value），Vue 默认不会检测到变化——因为 shallowRef 只监听 .value 的赋值，不递归代理内部属性。这时就需要手动通知视图更新：
- 修改了 shallowRef.value 的某个字段，例如
state.value.count++ - 调用了外部方法改变了 shallowRef.value 的状态（如 Canvas 实例重绘、Map 实例添加标记）
- 从非响应式上下文（如回调、定时器、事件监听器）中更新了 shallowRef.value
基本用法：配合 shallowRef 使用
只需在修改后调用 triggerRef(ref)，Vue 就会触发依赖该 ref 的组件重新渲染：
import { shallowRef, triggerRef } from 'vue'
const canvasState = shallowRef({ width: 800, height: 600 })
// 直接改内部属性 —— Vue 不会自动响应
canvasState.value.width = 1024
canvasState.value.height = 768
// 手动触发更新
triggerRef(canvasState)
和 triggerEvent / forceUpdate 的区别
triggerRef 是响应式系统底层 API，只影响依赖该 ref 的计算属性与模板；它不等于强制整个组件刷新（forceUpdate 已废弃），也不等价于派发自定义事件（triggerEvent 是 DOM 方法）。常见误区：
- ❌ 对普通 ref 或 reactive 对象调用 triggerRef —— 无效，也不需要
- ❌ 用 triggerRef 替代 watch 或 computed —— 它不建立依赖，只是“推”一次更新
- ✅ 在性能敏感场景（如高频 canvas 渲染、大量 DOM 操作后）精准控制更新时机
实用技巧：封装安全的浅层更新函数
为避免漏掉 triggerRef，可封装一个带自动触发的 setter：
function createShallowRefWithTrigger(initialValue) {
const ref = shallowRef(initialValue)
return {
get value() { return ref.value },
set value(val) {
ref.value = val
triggerRef(ref)
},
trigger() { triggerRef(ref) }
}
}
// 使用
const data = createShallowRefWithTrigger({ x: 0, y: 0 })
data.value.x = 100 // 自动触发
data.trigger() // 显式触发
