前言
在 Vue3 的响应式系统中，ref 和 reactive 是构建响应式数据的核心 API。但当我们直接修改 ref 对象内部属性时，可能会遇到视图不更新的情况。本文将深入探讨 triggerRef 的作用、使用场景及最佳实践。
一、响应式系统的局限性
Vue3 的响应式系统基于 Proxy 实现，默认会深度追踪对象变化。但以下场景可能无法自动触发更新：
- 直接修改数组索引：
arr[0] = newValue - 修改对象属性：
obj.key = newValue（当ref存储对象时） - 添加新属性：
obj.newKey = value
二、triggerRef 的作用
triggerRef 是 Vue3 组合式 API 提供的工具函数，用于手动强制触发依赖某个 ref 的组件更新。它直接操作响应式系统的依赖追踪机制，确保视图与数据同步。
三、使用场景
场景 1：修改 ref 对象的内部属性
javascript
import { ref, triggerRef } from 'vue';
const user = ref({ name: 'Alice', age: 25 });
// 直接修改对象属性（不会自动触发更新）
user.value.name = 'Bob';
// 手动触发更新
triggerRef(user);
场景 2：操作数组索引
javascript
const list = ref(['a', 'b', 'c']);
// 直接修改数组元素（不会自动触发更新）
list.value[0] = 'A';
// 手动触发更新
triggerRef(list);
场景 3：绕过响应式代理的修改
javascript
import { toRaw } from 'vue';
const rawData = toRaw(refObj.value);
rawData.key = 'new value'; // 修改原始对象
triggerRef(refObj); // 手动通知更新
四、与 reactive 的对比
| 特性 | ref | reactive |
|---|---|---|
| 数据结构 | 任意类型（通过 .value 访问） | 仅对象/数组 |
| 内部属性修改 | 需要 triggerRef | 自动触发更新 |
| 适用场景 | 基本类型、需要明确控制更新的场景 | 复杂对象、深度响应式需求 |
五、最佳实践
1. 优先使用响应式操作
javascript
// ✅ 推荐：替换整个对象
user.value = { ...user.value, name: 'Bob' };
// ✅ 推荐：使用数组方法
list.value = list.value.map((item, i) => i === 0 ? 'A' : item);
2. 谨慎使用 triggerRef
- 仅在必要时使用（如性能敏感场景）
- 避免频繁调用（可能导致不必要的渲染）
3. 结合 markRaw 使用
javascript
import { markRaw } from 'vue';
const nonReactiveObj = markRaw({ data: '...' });
refObj.value = nonReactiveObj;
// 修改 nonReactiveObj 后需要手动触发
triggerRef(refObj);
六、源码解析
在 Vue3 源码中，triggerRef 的实现本质是调用 trigger 函数通知依赖更新：
typescript
// packages/reactivity/src/ref.ts
export function triggerRef(ref: Ref) {
trigger(ref, TriggerOpTypes.SET, 'value', void 0)
}
七、常见问题
Q1: triggerRef 和 forceUpdate 的区别？
forceUpdate是选项式 API 的方法，强制整个组件重新渲染triggerRef仅触发与特定ref关联的依赖更新
Q2: 为什么不用 reactive 替代？
ref更灵活（支持任意数据类型）ref在模板中自动解包，无需.value
总结
triggerRef 是 Vue3 响应式系统的补充工具，用于解决特定场景下的更新问题。理解其适用场景并合理使用，可以提升应用性能和代码可控性。建议优先使用响应式原生操作，仅在必要时手动触发更新。
