onUnmounted() Unmounted Hook
Last updated: 2026-10-22
onUnmounted() Unmounted Hook
onUnmounted() runs after the component is destroyed, its DOM removed and all its reactive effects stopped.
| Group | Lifecycle Hooks |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
onUnmounted(() => {
// fully destroyed; release external resources
})⚙️ Arguments
| callback | Function executed after unmount |
|---|
Returns：None
▶ Example
Edit the code below and see the live result:
Output：
Toggling the child off logs 'child unmounted'.💡 Key Points
ℹ️ Note Vue stops the component's own effects automatically — handle only external resources.
⚠️ Warning DOM reads are unreliable here — it may already be gone.
💡 Tip Always remove global listeners: otherwise callbacks of destroyed instances keep running.
🏷️ Related Lifecycle Hooks
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Do I still need to stop watchers manually?
A No — component-bound effects stop automatically, except detached scopes.
Q onUnmounted or onBeforeUnmount?
A Pure logic cleanup uses onUnmounted; DOM-dependent cleanup uses onBeforeUnmount.
Q Does it run under SSR?
A No — unmount hooks are browser-only.
