Vue响应式系统中triggerRef怎么用 手动触发浅层响应式更新

triggerRef是Vue3专为shallowRef设计的手动更新API，用于在修改其.value内部属性后强制触发依赖更新；因shallowRef仅响应.value直接赋值而不追踪内层变化，故需triggerRef补足视图刷新。

triggerRef 是 Vue 3 中专为 shallowRef 设计的手动更新 API。它不改变数据本身，而是告诉响应式系统：“这个 shallowRef 的 .value 虽然没换，但内部内容变了，请重新通知依赖更新视图。”

为什么需要 triggerRef？

shallowRef 只监听 .value 的直接赋值（比如 data.value = newObj），不追踪其内部属性变化（比如 data.value.count++ 或 data.value.name = '李四'）。这种设计节省性能，但也意味着你改了内部字段，视图不会自动刷新——这时就得靠 triggerRef 补上这一步。

基本用法：两步走

• 先用 shallowRef 创建一个浅层响应式引用
• 修改完 .value 内部属性后，立刻调用 triggerRef(你的shallowRef)

示例：

const userInfo = shallowRef({ name: '张三', age: 25 })
userInfo.value.age = 26 ← 这行不会触发更新
triggerRef(userInfo) ← 加上这行，依赖（如模板、effect）就会重跑

常见使用场景

• 外部数据注入：从接口拿到新数据后，深拷贝进 shallowRef.value 的某个字段，再 triggerRef
• 第三方库联动：比如用 Chart.js 渲染图表，更新配置对象内部属性后需同步视图
• 避免无谓的深层响应开销：处理大型对象（如编辑器内容、地图图层）时，用 shallowRef + triggerRef 精准控制更新时机

注意几个关键点

• triggerRef 只对 shallowRef 有效；对 ref 或 reactive 不起作用（它们本来就会自动响应内部变化）
• 不能代替赋值操作——必须先改数据，再调用 triggerRef
• 多次连续调用不会报错，但通常一次就够了；Vue 会批量合并后续更新
• 在 setup 或组合式函数中直接 import 使用：import { shallowRef, triggerRef } from 'vue'