onUpdated() Updated Hook
Last updated: 2026-10-22
onUpdated() Updated Hook
onUpdated() runs after the component re-renders and the DOM is patched — read fresh measurements or sync third-party widgets.
| Group | Lifecycle Hooks |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
onUpdated(() => {
// the DOM already reflects the latest state
})⚙️ Arguments
| callback | Function executed after the update |
|---|
Returns：None
▶ Example
Edit the code below and see the live result:
Output：
The height figure follows the font-size changes.💡 Key Points
⚠️ Warning Never mutate state here — it re-triggers updates and loops forever.
💡 Tip Prefer watch/watchPostEffect for specific data; use this hook only for per-update work such as layout recalculation.
ℹ️ Note A parent's onUpdated fires after children update.
🏷️ Related Lifecycle Hooks
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Why does mutating here loop?
A Each mutation schedules another update, which fires the hook again.
Q How does it relate to nextTick?
A It runs at the same point as code after await nextTick().
Q When is it necessary?
A When every update needs DOM measurement or library syncing.
