onBeforeUnmount() Before Unmount Hook
Last updated: 2026-10-22
onBeforeUnmount() Before Unmount Hook
onBeforeUnmount() runs just before the component is destroyed — the DOM is still intact, the last chance to clean up timers, listeners and third-party instances.
| Group | Lifecycle Hooks |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
onBeforeUnmount(() => {
clearInterval(timer)
chart.destroy()
})⚙️ Arguments
| callback | Function executed before unmount |
|---|
Returns：None
▶ Example
Edit the code below and see the live result:
Output：
The counter ticks each second and stops after unmount.💡 Key Points
💡 Tip Release every manual resource here in pairs — timers, listeners, third-party instances.
ℹ️ Note In composables prefer onScopeDispose for the same purpose.
⚠️ Warning The DOM still exists here — finish DOM-dependent teardown now.
🏷️ Related Lifecycle Hooks
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q How does it differ from onUnmounted?
A Both clean up; use this one while the DOM still exists.
Q What happens without cleanup?
A Timers keep firing and listeners pile up, leaking memory over time.
Q Can unmount be prevented?
A No — control rendering with v-if instead.
