El ciclo de vida de un componente en Vue.js es una serie de etapas por las que pasa un componente desde su creación hasta su destrucción.
Las etapas principales del ciclo de vida de un componente de Vue son:
- Creación: El componente se inicializa, se configuran sus propiedades (props) y se establece su estado inicial.
- Montaje: El componente se añade al DOM y se vuelve visible en la interfaz de usuario.
- Actualización: El componente se actualiza cuando cambian sus datos reactivos o propiedades.
- Destrucción: El componente se elimina del DOM y se liberan los recursos asociados para evitar fugas de memoria.
Hooks del ciclo de vida
Cada etapa tiene Hooks asociados que nos van a permitir ejecutar código en momentos específicos del ciclo de vida (si lo necesitamos).
| Hook | Descripción |
|---|---|
onBeforeMount | Se ejecuta justo antes de que el componente se monte en el DOM. |
onMounted | Se ejecuta después de que el componente se ha montado en el DOM. |
onBeforeUpdate | Se ejecuta justo antes de que el componente se actualice. |
onUpdated | Se ejecuta después de que el componente se ha actualizado. |
onBeforeUnmount | Se ejecuta justo antes de que el componente se destruya. |
onUnmounted | Se ejecuta después de que el componente se ha destruido. |
Vamos a ver cada uno de ellos en profundidad 👇.
Hook onBeforeMount
El hook onBeforeMount se ejecuta justo antes de que el componente se monte en el DOM.
En esta etapa, el componente ha sido inicializado, pero aún no se ha añadido al DOM.
onBeforeMount(() => {
console.log('El componente está a punto de montarse en el DOM');
});Hook onMounted
El hook onMounted se ejecuta después de que el componente se ha montado en el DOM.
En esta etapa, el componente está completamente renderizado y es visible en la página.
onMounted(() => {
console.log('El componente se ha montado en el DOM');
});Hook onBeforeUpdate
El hook onBeforeUpdate se ejecuta justo antes de que el componente se actualice. Esto ocurre cuando cambian los datos reactivos o las propiedades del componente.
onBeforeUpdate(() => {
console.log('El componente está a punto de actualizarse');
});Hook onUpdated
El hook onUpdated se ejecuta después de que el componente se ha actualizado. En esta etapa, el DOM ha sido actualizado para reflejar los cambios en los datos.
onUpdated(() => {
console.log('El componente se ha actualizado');
});Hook onBeforeUnmount
El hook onBeforeUnmount se ejecuta justo antes de que el componente se destruya.
En esta etapa, el componente aún está en el DOM, pero está a punto de ser eliminado.
onBeforeUnmount(() => {
console.log('El componente está a punto de destruirse');
});Hook onUnmounted
El hook onUnmounted se ejecuta después de que el componente se ha destruido.
En esta etapa, el componente ha sido eliminado del DOM y se han liberado los recursos asociados.
onUnmounted(() => {
console.log('El componente se ha destruido');
});Cómo usar los hooks del ciclo de vida
Para usar los hooks del ciclo de vida del componente usando la Composition API, los tenemos disponibles como funciones que llamaremos dentro de la función setup.
Por ejemplo, aquí os pongo un fragmento de código donde se usan todos los Hooks para ver su uso.
<template>
<div>
<h1>Contador: {{ count }}</h1>
<button @click="incrementar">Incrementar</button>
</div>
</template>
<script setup>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';
const count = ref(0);
function incrementar() {
count.value++;
}
// Hooks del ciclo de vida
onBeforeMount(() => {
console.log('El componente está a punto de montarse en el DOM');
});
onMounted(() => {
console.log('El componente se ha montado en el DOM');
});
onBeforeUpdate(() => {
console.log('El componente está a punto de actualizarse');
});
onUpdated(() => {
console.log('El componente se ha actualizado');
});
onBeforeUnmount(() => {
console.log('El componente está a punto de destruirse');
});
onUnmounted(() => {
console.log('El componente se ha destruido');
});
</script>
<style>
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>En este ejemplo,
- Hemos utilizado todos los hooks principales del ciclo de vida
- Cada hook imprime un mensaje en la consola en la etapa correspondiente del ciclo de vida.
Normalmente nunca vas a necesitar todos los hooks. Esto es solo una demo para que puedas ver su funcionamiento.
Ejemplo práctico
Uso de onMounted para cargar datos
Un caso común de uso de los hooks del ciclo de vida es cargar datos desde una API cuando el componente se monta. A continuación, veremos un ejemplo práctico utilizando el hook onMounted.
<template>
<div>
<h1>Lista de usuarios</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>En este ejemplo, utilizamos el hook onMounted para cargar una lista de usuarios desde una API cuando el componente se monta en el DOM.