The lifecycle of a component in Vue.js is a series of stages that a component goes through from its creation to its destruction.
The main stages of the Vue component lifecycle are:
- Creation: The component is initialized, its properties (props) are set up, and its initial state is established.
- Mounting: The component is added to the DOM and becomes visible in the user interface.
- Updating: The component is updated when its reactive data or properties change.
- Destruction: The component is removed from the DOM, and associated resources are released to prevent memory leaks.
Lifecycle Hooks
Each stage has associated Hooks that allow us to execute code at specific moments in the lifecycle (if needed).
| Hook | Description |
|---|---|
onBeforeMount | Executes just before the component is mounted in the DOM. |
onMounted | Executes after the component has been mounted in the DOM. |
onBeforeUpdate | Executes just before the component is updated. |
onUpdated | Executes after the component has been updated. |
onBeforeUnmount | Executes just before the component is destroyed. |
onUnmounted | Executes after the component has been destroyed. |
Let’s go through each of them in depth 👇.
Hook onBeforeMount
The onBeforeMount hook executes just before the component is mounted in the DOM.
At this stage, the component has been initialized, but it has not yet been added to the DOM.
onBeforeMount(() => {
console.log('The component is about to be mounted in the DOM');
});Hook onMounted
The onMounted hook executes after the component has been mounted in the DOM.
At this stage, the component is fully rendered and visible on the page.
onMounted(() => {
console.log('The component has been mounted in the DOM');
});Hook onBeforeUpdate
The onBeforeUpdate hook executes just before the component is updated. This occurs when the reactive data or properties of the component change.
onBeforeUpdate(() => {
console.log('The component is about to be updated');
});Hook onUpdated
The onUpdated hook executes after the component has been updated. At this stage, the DOM has been updated to reflect the changes in the data.
onUpdated(() => {
console.log('The component has been updated');
});Hook onBeforeUnmount
The onBeforeUnmount hook executes just before the component is destroyed.
At this stage, the component is still in the DOM, but it is about to be removed.
onBeforeUnmount(() => {
console.log('The component is about to be destroyed');
});Hook onUnmounted
The onUnmounted hook executes after the component has been destroyed.
At this stage, the component has been removed from the DOM, and associated resources have been released.
onUnmounted(() => {
console.log('The component has been destroyed');
});How to Use Lifecycle Hooks
To use the component lifecycle hooks with the Composition API, we have them available as functions that we will call within the setup function.
For example, here is a code snippet that uses all the hooks to see their usage.
<template>
<div>
<h1>Counter: {{ count }}</h1>
<button @click="increment">Increment</button>
</div>
</template>
<script setup>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';
const count = ref(0);
function increment() {
count.value++;
}
// Lifecycle hooks
onBeforeMount(() => {
console.log('The component is about to be mounted in the DOM');
});
onMounted(() => {
console.log('The component has been mounted in the DOM');
});
onBeforeUpdate(() => {
console.log('The component is about to be updated');
});
onUpdated(() => {
console.log('The component has been updated');
});
onBeforeUnmount(() => {
console.log('The component is about to be destroyed');
});
onUnmounted(() => {
console.log('The component has been destroyed');
});
</script>
<style>
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>In this example,
- We have used all the main lifecycle hooks
- Each hook prints a message to the console at the corresponding stage of the lifecycle.
Usually, you will never need all the hooks. This is just a demo so you can see how they work.
Practical Example
Using onMounted to Load Data
A common use case for lifecycle hooks is to load data from an API when the component mounts. Next, we will see a practical example using the onMounted hook.
<template>
<div>
<h1>User List</h1>
<ul>
<li v-for="user in users" :key="user.id">{{ user.name }}</li>
</ul>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const users = ref([]);
onMounted(async () => {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
users.value = await response.json();
});
</script>
<style>
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 10px 0;
}
</style>In this example, we use the onMounted hook to load a list of users from an API when the component mounts in the DOM.