Vue 'unmounted' Lifecycle Hook
Example
Using the unmounted lifecycle hook to create an alert when the component is removed from the DOM.
<script>
export default {
unmounted() {
alert("The component is removed (unmounted)!");
}
}
</script>
Definition and Usage
The unmounted lifecycle hook is called after a component is removed from the DOM.
This hook can for example be used to remove event listeners or to cancel timers or intervals.
Note: In the example above, the alert box appears before we can see that the component is removed. That is because at first the component is removed from the DOM, then the alert appears, and then at last, when you click "OK" in the alert box, the browser renders the page without the component inside the DOM.
Related Pages
Vue Tutorial: Vue Lifecycle Hooks
Vue Tutorial: The 'unmounted' Hook
Vue Reference: Vue 'beforeUnmount' Lifecycle Hook
