LuisLlamas Logo
vuejs-ciclo-de-vida-componentes

Component Lifecycle in Vue.js

  • 5 min
  • Intermediate

The lifecycle of a component in Vue.js is a series of stages a component goes through from its creation to its destruction.

The main stages of a Vue component’s lifecycle are:

  1. Creation: The component is initialized, its properties (props) are configured, and its initial state is set.
  2. Mounting: The component is added to the DOM and becomes visible in the user interface.
  3. Updating: The component updates when its reactive data or properties change.
  4. 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 we need to).

HookDescription
onBeforeMountExecutes just before the component is mounted to the DOM.
onMountedExecutes after the component has been mounted to the DOM.
onBeforeUpdateExecutes just before the component updates.
onUpdatedExecutes after the component has updated.
onBeforeUnmountExecutes just before the component is destroyed.
onUnmountedExecutes after the component has been destroyed.

Let’s look at each one in depth 👇.

Hook onBeforeMount

The onBeforeMount hook executes just before the component is mounted to the DOM.

At this stage, the component has been initialized but has not yet been added to the DOM.

onBeforeMount(() => {
  console.log('The component is about to be mounted in the DOM');
});
Copied!

Hook onMounted

The onMounted hook executes after the component has been mounted to 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');
});
Copied!

Hook onBeforeUpdate

The onBeforeUpdate hook executes just before the component updates. This happens when the component’s reactive data or properties change.

onBeforeUpdate(() => {
  console.log('The component is about to be updated');
});
Copied!

Hook onUpdated

The onUpdated hook executes after the component has updated. At this stage, the DOM has been updated to reflect the data changes.

onUpdated(() => {
  console.log('The component has been updated');
});
Copied!

Hook onBeforeUnmount

The onBeforeUnmount hook executes just before the component is destroyed.

At this stage, the component is still in the DOM but is about to be removed.

onBeforeUnmount(() => {
  console.log('The component is about to be destroyed');
});
Copied!

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');
});
Copied!

How to use lifecycle hooks

To use the component’s lifecycle hooks with the Composition API, they are available to us as functions that we will call inside the setup function.

For example, here is a code snippet using 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>
Copied!

In this example,

  • We have used all the main lifecycle hooks
  • Each hook prints a message to the console at the corresponding lifecycle stage.

You will almost never need all the hooks. This is just a demo so you can see how they work.

Practical example

Using onMountedto load data

A common use case for lifecycle hooks is loading data from an API when the component mounts. Below, 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>
Copied!

In this example, we use the onMounted hook to load a list of users from an API when the component mounts to the DOM.

On this page