triggerref 是 vue 3 为 shallowref 提供的手动更新机制，仅向响应式系统发送“值已变更”信号，不修改数据、不代理，需传入 shallowref 实例本身，在内部属性修改后立即调用。
triggerRef 是 Vue 3 提供的明确、轻量的手动更新机制，专门用于“唤醒” shallowRef 的响应式依赖。它不改变数据，也不做代理，只向响应式系统发送一个信号：“这个 shallowRef 的值内容变了，请重新执行所有依赖它的计算逻辑和视图渲染”。
它解决的核心问题
shallowRef 只响应 .value = 新对象 这种整体赋值操作，对内部修改完全“视而不见”：
- userInfo.value.name = '李四' → 不触发更新
- config.value.apiTimeout = 10000 → 不触发更新
- canvasState.value.width++ → 不触发更新
因为 shallowRef 内部没有递归代理，Vue 无法通过 Proxy 拦截这些深层赋值。triggerRef 就是为这类场景补上缺失的一环。
正确调用方式
必须传入 shallowRef 实例本身，且只能在修改之后立即调用：
- ✅ userInfo.value.age = 28; triggerRef(userInfo);
- ❌ triggerRef(userInfo.value);（参数错误，会报错）
- ❌ triggerRef();（漏传参数，无效）
- ❌ triggerRef(ref({}));（ref 不支持，静默忽略）
典型适用场景
不是所有修改都需要它，关键看是否满足两个条件：用了 shallowRef，又绕过了 .value 整体替换：
- 大型不可变数据结构：如含上千项的列表对象，只改其中几项字段，避免整条替换带来的内存开销
- 第三方非响应式实例：Canvas、Three.js 场景对象、Map 实例等，它们本就不该被 Proxy 包裹，用 shallowRef + markRaw 更合理，改完属性后 triggerRef 即可
- 配置对象高频局部更新：比如实时调整图表主题色、筛选条件对象中的某个字段，无需重建整个配置引用
和类似机制的区别
它不是万能刷新按钮，定位非常清晰：
- ≠ forceUpdate：不强制重绘整个组件，只通知依赖该 shallowRef 的部分重新求值
- ≠ watch 或 computed：它不建立新依赖，也不执行逻辑，只是“推一次”已有依赖
- ≠ trigger（内部函数）：trigger 是 Vue 底层自动调用的，用户不可见；triggerRef 是唯一暴露给开发者的、对应 shallowRef 的手动触发入口
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
