onDeactivated() Called When Deactivated
Last updated: 2026-10-22
onDeactivated() Called When Deactivated
onDeactivated() runs when a cached component is hidden — it is not destroyed, so pause timers here.
| Group | Lifecycle Hooks |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
onDeactivated(() => {
clearInterval(timer)
})⚙️ Arguments
| callback | Function executed on deactivation |
|---|
Returns：None
▶ Example
Edit the code below and see the live result:
Output：
Hiding pauses the clock; showing resumes where it stopped.💡 Key Points
💡 Tip Pair it with onActivated — resume and pause complete the cached lifecycle.
⚠️ Warning Deactivation is not destruction — instance and state persist; avoid irreversible cleanup.
🏷️ Related Lifecycle Hooks
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Is state preserved?
A Yes — that is the point of KeepAlive.
Q Difference from onUnmounted?
A Deactivation hides; unmount destroys once the cache is dropped.
Q What should be paused here?
A Timers, polling, animations and subscriptions that need not run while hidden.
