updated Updated
Last updated: 2026-10-22
updated Updated
updated runs after a data change re-renders the component and the DOM is patched — for re-measuring or syncing widgets.
| Group | Options: Rendering & Lifecycle |
|---|---|
| Kind | Option |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
export default {
updated() {
// the DOM already reflects the change
}
}⚙️ Arguments
| value | No arguments |
|---|
Returns：No return value
▶ Example
Edit the code below and see the live result:
Output：
The height follows the font-size changes.💡 Key Points
⚠️ Warning Never mutate rendered data here — it loops forever.
💡 Tip Prefer watch for specific data; updated suits per-update sync.
ℹ️ Note The parent updates after its children.
🏷️ Related Rendering & Lifecycle
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Why does mutating data loop?
A Each write schedules another update, re-firing the hook.
Q How does it differ from watch?
A watch targets data; updated reacts to rendering itself.
Q Is the DOM fresh here?
A Yes — that is its advantage over beforeUpdate.
