What Are Vue Lifecycle Hooks?

Vue lifecycle hooks are special functions that run at the different stages a Vue instance goes through, from creation to destruction. They are called at specific moments of a component's life and let developers step in at those moments.

The most common Vue lifecycle hooks and what they do:

1. beforeCreate: runs while the instance is being initialised, before data and events are set up.
2. created: runs right after the instance is created. Data and methods are available, but the DOM is not mounted yet and $el does not exist.
3. beforeMount: runs right before mounting. The template or render function has been prepared but not applied to the real DOM yet.
4. mounted: runs after the instance is mounted. The whole component is rendered and in the DOM.
5. beforeUpdate: runs when reactive data changes, before the DOM is updated.
6. updated: runs after reactive changes have been applied to the DOM.
7. beforeDestroy: runs right before the instance is destroyed; it is still fully functional.
8. destroyed: runs after the instance is destroyed; its event listeners and child components have been removed.

These hooks manage a component's lifecycle and run custom work at each stage — for example fetching data from an API, or setting up and cleaning up event listeners.

Note (Vue 3): In Vue 3, beforeDestroy and destroyed were renamed to beforeUnmount and unmounted. In the Composition API their counterparts are onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount and onUnmounted; instead of beforeCreate and created, code goes directly into setup.