Site Title | Lifecycle Hooks en Vue.js: una mirada clara y didáctica

Creación del componente (Instanciación)

🧩setup()

Este es el primer lugar donde puedes colocar lógica reactiva: ref, reactive, computed, watch, etc.

Es como cuando estás preparando los ingredientes antes de cocinar. No estás en la cocina aún, pero ya tienes todo listo.

js
CopyEdit
<script setup>
import { ref } from 'vue';

const mensaje = ref('Hola');
</script>

🔹 beforeMount()

Se ejecuta justo antes de insertar el HTML en el DOM. Aún no puedes acceder a los elementos del DOM.

🍳 Encendiste la estufa y estás por poner la sartén, pero aún no hay nada cocinándose.

🔹 mounted()

Se ejecuta cuando el componente ya está en el DOM. Aquí sí puedes usar document, acceder a refs del DOM, llamar APIs, etc.

🍽️ La comida está servida en la mesa, lista para disfrutarla.

js
CopyEdit
import { onMounted } from 'vue';

onMounted(() => {
  console.log('El componente fue montado 🎉');
});

Analógicamente: Ya serviste la comida, ahora puedes comerla.

Cada vez que cambias algo reactivo (ref, reactive...), Vue vuelve a renderizar el DOM, y puedes reaccionar con estos hooks:

🔹 beforeUpdate()

Antes de que se actualice el DOM. Puedes revisar el estado actual y compararlo.

🧂 Estás por probar la comida para ver si le falta sal, pero aún no hiciste cambios.

🔹 updated()

Después de actualizar el DOM. Ideal para trabajar con efectos visuales, animaciones, etc.

✨ Ya agregaste sal y diste la primer probada. Todo quedó más sabroso.

js
CopyEdit
import { onUpdated } from 'vue';

onUpdated(() => {
  console.log('El componente se actualizó ✨');
});

Cuando Vue elimina un componente del DOM (por ejemplo, al cambiar de ruta):

🔹 beforeUnmount()

Antes de que se elimine del DOM.

🧼 Ya terminaste de comer y estás por levantarte a lavar los platos.

🔹 unmounted()

Después de ser eliminado. Útil para limpiar listeners, timeouts o efectos secundarios.

🧽 Platos lavados, cocina limpia. Todo listo para empezar otra receta.

js
CopyEdit
import { onUnmounted } from 'vue';

onUnmounted(() => {
  console.log('Bye bye componente 👋');
});