What is the Vue component lifecycle?

VueJunior~2 min read

The Vue component lifecycle is the sequence of stages a component goes through from the moment it is created until it is destroyed. At each stage, Vue calls special lifecycle hooks, which let you run code at the right moment.

In simple terms:

The lifecycle is the "life story" of a component: creation -> render -> update -> removal.

This topic is one of the key ones in Vue interviews.

The main lifecycle phases

Every component goes through 4 major stages:

Creation
Mounting into the DOM
Updating
Unmounting

1) The component creation phase

At this point there is still no access to the DOM, but the following are already available:

props
reactive data
computed
methods
watchers

Hooks:

`beforeCreate`

The component has just started being created. data and props are not yet set.

`created`

Reactivity already exists. You can access data, methods, props.

But there is no DOM yet!

Used for:

API requests
initializing data

2) The mounting phase

The component is added to the DOM for the first time.

Hooks:

`beforeMount`

The DOM has not yet been updated by Vue.

`mounted`

The component has appeared in the DOM. You can work with elements via ref, call third-party libraries.

Used for:

initializing plugins
working with canvas, charts
DOM manipulations
focusing an input

3) The updating phase

When reactive data changes, the component re-renders.

Hooks:

`beforeUpdate`

The old DOM is still in place. You can look at the old values or cancel some actions.

`updated`

The DOM has been updated. The best place to react to UI changes.

Important: Do not change data here, it can cause an infinite loop!

4) The unmounting phase

When the component is removed from the DOM (for example, v-if became false).

Hooks:

`beforeUnmount`

The component is still alive, but will soon be removed. You can clean up timers or handlers.

`unmounted`

The component no longer exists in the DOM. Anything that was tied to the DOM is better released.

Used for:

stopping setInterval
unsubscribing from events
closing web sockets
cleaning up third-party libraries

All the Vue 3 hooks (full list)

Creation phase:

beforeCreate
created

Mounting:

beforeMount
mounted

Updating:

beforeUpdate
updated

Unmounting:

beforeUnmount
unmounted

Example in the Composition API

import { onMounted, onUpdated, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component mounted');
    });

    onUpdated(() => {
      console.log('Component updated');
    });

    onUnmounted(() => {
      console.log('Component unmounted');
    });
  }
}

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.