Suggest an edit

Improve this article

Refine the answer for “What is the Vue component lifecycle?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**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**:

1. **Creation**
2. **Mounting into the DOM**
3. **Updating**
4. **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

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

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

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

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

Markdown · drag & drop images · ⌘B / ⌘I shortcuts451 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.