triggerRef 手动更新浅层响应式技巧

`triggerRef` 是 Vue 3 响应式系统中一个关键但易被忽视的底层工具，专为解决 `shallowRef` 和 `shallowReactive` 在直接修改对象内部属性时无法自动触发视图更新的痛点——当你操作 Canvas 状态、第三方库实例或大型配置对象等性能敏感场景时，它能让你精准、轻量地“手动唤醒”依赖该 ref 的组件重新渲染，既避免了过度响应带来的性能损耗，又绕开了 `forceUpdate` 的粗暴刷新和 `watch` 的冗余开销，是构建高效、可控响应式逻辑不可或缺的实用技巧。

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

本篇关于《triggerRef 手动更新浅层响应式技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！