triggerRef() Force a Shallow Ref Update
Last updated: 2026-10-22
triggerRef() Force a Shallow Ref Update
triggerRef() manually triggers effects linked to a shallow ref — the escape hatch when inner mutations are untracked.
| Group | Reactivity: Advanced |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
big.value.list.push(1) // no trigger
triggerRef(big) // force it⚙️ Arguments
| shallowRef | The shallow ref to force |
|---|
Returns：None
▶ Example
Edit the code below and see the live result:
Output：
Each click increments the length (without triggerRef it would stay at 1).💡 Key Points
⚠️ Warning Only needed for shallow refs/reactive; deep refs track automatically.
ℹ️ Note Useful to sync UI after external mutable sources change.
🏷️ Related Advanced
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Can it replace wholesale replacement?
A It works, yet replacing wholesale is clearer and more idiomatic.
Q What happens on a normal ref?
A It still forces an update, usually unnecessary.
Q Does it cause extra renders?
A Yes — it re-runs dependent effects, so avoid calling it in tight loops.
