Vue 'deactivated' Lifecycle Hook
Example
Using the deactivated lifecycle hook to log every time the deactivated hook is called.
export default {
data() {
return {
hookLog: []
}
},
deactivated() {
console.log("deactivated")
this.hookLog.push("deactivated");
}
}
Definition and Usage
The deactivated lifecycle hook runs when a cached component is removed from the DOM, but not destroyed.
A component is cached with the use of the built-in <KeepAlive> component.
After a cached component is created, it can be inserted and removed from the DOM many times, and every time such a cached component is removed from the DOM (but not destroyed), the deactivated lifecycle hook is called.
Note: The difference between the deactivated and unmounted hooks is that when a cached component is removed from the DOM (without being destroyed), only the deactivated hook is called.
Related Pages
Vue Tutorial: Vue Lifecycle Hooks
Vue Tutorial: The 'activated' Hook
Vue Tutorial: The 'deactivated' Hook
Vue Tutorial: The 'mounted' Hook
Vue Tutorial: The 'unmounted' Hook
Vue Reference: Vue 'activated' Lifecycle Hook
Vue Reference: Vue 'mounted' Lifecycle Hook
Vue Reference: Vue 'unmounted' Lifecycle Hook