Unmounting Hooks

Let’s look at the last two regular lifecycle hooks—beforeUnmount and unmounted. These two get called right before and right after removing a component respectively. A component is considered destroyed once everything related to the component is gone. This includes reactivity, templates, and child components. Let’s first see how we can add them.

Note: In Vue 2, beforeUnmount and unmounted used to be named beforeDestroy and destroyed respectively. While beforeDestroy and destroyed are still around, their usage is discouraged.

Adding the hooks

We can add these hooks the same way we add any other hook. However, one thing should be kept in mind—these hooks won’t be called on the app instance in a typical setup, except if deliberately called via .$destroy(). However, we can still add them to the app, as illustrated below: