A Guide to Understanding Vue Lifecycle Hooks

📣 Sponsor

Like other frameworks, Vue has a number of lifecycle hooks which allow us to attach code to specific events that occur while a Vue application is being created or used - for example, when the component loads, when a component is added to the DOM, or when something is deleted.

Vue has a lot of lifecycle hooks, and what can be confusing is what each one means or does. In this guide, we’ll be covering what each lifecycle hook does, and how to use them.

Prerequisites

If you are unfamiliar with Vue, you might want to check out my guide on creating your first Vue applications, before doing this one. Alternatively, you can read my guide on creating a to-do list in Vue, if you are slightly more familiar with it.

Lifecycle Hooks in Vue

The important thing to note here is that Vue has two paradigms when it comes to lifecycle hooks. One is using the Compositions API, something introduced in Vue 3, and the other is the “Options API”, which is the prototypical pattern of defining Vue components. In this guide, we’ll start with the Options API, and then build off that to show how things work in the compositions API.

Example of Options API

If you are unfamiliar with the Options API, it is the version of Vue that looks like the code below:


export default {
    name: 'Component Name',
    data() {
        return {
            phoneNumber: '123-123-123'
        }
    },
    mounted() {

    }
}

Lifecycle Hooks Diagram

To understand when each lifecycle hook fires, let’s look at a diagram. Below, an image depicts when each lifecycle hook fires.

Legend

Component State

Stage in Rendering

Lifecycle Hook

New Component Detected

beforeCreate()

Options API Loads Up

created()

Compile Template
This may already be complete
if App was built using
"npm run build"

beforeMount()

Renders Component
Create DOM nodes

mounted()

Component Mounted

beforeUpdate()

Update Data

updated()

beforeUnmount()

Component Unmounted

unmounted()

Running a Lifecycle Hook

To run any lifecycle hook with the Options API, you can add it to your Javascript prototype. For example, if you want to use `beforeCreate()`, the first hook fired after a new component is detected, you could add it like this:


export default {
    name: 'Component Name',
    data() {
        return {
            someData: '123-123-123'
        }
    },
    mounted() {
        // Any code you want to fire immediately before the Options API loads up
    }
}

Now that we’ve covered when the different hooks occur, let’s look at what each of them do, and when they happen.

beforeCreate()

Called at the point the component is initialized. data() and computed properties are not available at this point. It is useful for calling APIs which do not adjust the data of the component. If you update data() here, it will be lost once the Options API loads up.

created()

Called after the instance has finished processing all state operations. You have access to reactive data, computed properties, methods and watchers. $el, which is where Vue stores the component HTML, is not available yet, since the DOM element is not created. If you want to fire something like an API, or update data(), you can do it here.

beforeMount()

This hook runs immediately before rendering occurs. The template has been compiled so it is stored in memory, but it has not been attached to the page yet. None of the DOM elements have been created yet. $el is still unavailable at this stage.