Vue3 triggerRef 怎么手动触发 shallowRef 的更新？

Question

仓乃文 · Accepted Answer

shallowRef 修改内部属性不会自动触发视图更新，triggerRef 可以强制触发依赖 shallowRef 的副作用重新执行，适用于需要直接修改内部数据又想触发更新的场景。

基本用法：
```javascript
import { shallowRef, triggerRef } from "vue";
const state = shallowRef({ count: 0, list: [] });
state.value.count = 1;  // 修改内部属性，不触发更新
triggerRef(state);  // 手动触发更新
```

批量修改后一次触发：
```javascript
const list = shallowRef([]);
list.value.push(item1);  // 多次修改内部
list.value.push(item2);
list.value.push(item3);
triggerRef(list);  // 只触发一次更新，比每次替换 .value 更高效
```

补充说明：
- triggerRef 只对 shallowRef 有意义，普通 ref 修改 .value 自动触发更新
- 比 state.value = { ...state.value } 整体替换更高效，避免创建新对象
- 在 watch 的 flush: "post" 回调中不需要手动 triggerRef，Vue 会自动处理
- 如果频繁需要 triggerRef，考虑是否应该用 ref 而非 shallowRef