如何利用 triggerRef 手动触发更新？操作浅层响应式的高级技巧-Vue.js-PHP中文网

triggerRef 用于手动触发 shallowRef 或 shallowReactive 的更新，适用于直接修改其内部属性而 Vue 无法自动追踪的场景，如修改 canvasState.value.width 后需调用 triggerRef(canvasState)。

如何利用 triggerref 手动触发更新？操作浅层响应式的高级技巧

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()     // 显式触发