Los hooks del ciclo de vida en Vue.js te permiten ejecutar código en momentos específicos de la existencia de un componente: antes de crearse, al crearse, al montarse en el DOM y al destruirse. Saber cuándo dispararlos evita errores comunes al intentar acceder a datos o elementos que aún no existen.

Este recorrido práctico te muestra qué ocurre con data y con el elemento HTML en cada fase, usando un componente mínimo en App.vue que solo declara una variable text con el valor Hola, Vue.

¿Cómo se declaran los hooks dentro de un componente Vue?

Dentro del objeto del componente, los hooks se agregan como funciones al mismo nivel que data. No necesitas importar nada extra: basta con escribir el nombre del hook y darle un cuerpo.

En el ejemplo se añaden tres funciones para observar el comportamiento paso a paso:

• beforeCreate: se ejecuta antes de inicializar la reactividad.
• created: corre cuando la instancia ya existe, pero el componente todavía no se monta.
• mounted: dispara cuando el componente ya está en el DOM.

Dentro de cada función se imprime con console.log el nombre del hook, junto con this.$data para inspeccionar el objeto de datos y this.$el para revisar el elemento HTML asociado.

¿Qué es un hook del ciclo de vida en Vue? Es una función que Vue ejecuta automáticamente en un momento específico de la vida de un componente, como su creación, montaje o destrucción. Te da un punto exacto para correr lógica.

¿Qué pasa con data y el elemento DOM en cada fase?

Al recargar el navegador con el dev server activo, la consola muestra una secuencia clara de tres estados muy distintos. Y aquí viene lo interesante: cada hook tiene acceso a cosas diferentes.

¿Qué ocurre en beforeCreate?

En esta fase el objeto data aparece vacío y el elemento HTML tampoco existe. Vue todavía no ha inicializado el sistema de reactividad, así que la variable text aún no es accesible desde la instancia. Tampoco hay nada montado en el virtual DOM.

Usar beforeCreate para leer datos del componente no funciona, porque simplemente no están listos.

¿Qué ocurre en created?

Cuando se dispara created, la instancia del objeto Vue ya fue construida. Ahora this.$data sí contiene la variable text con el valor Hola, Vue, porque la función que devuelve los datos ya se ejecutó.

Sin embargo, el elemento HTML sigue sin existir. El componente fue creado, pero no montado. Es el momento ideal para preparar datos, no para tocar el DOM.

¿Cuándo puedo acceder a this.$data en Vue? Desde el hook created en adelante. Antes de eso, en beforeCreate, el sistema de reactividad aún no ha inicializado las variables del componente.

¿Qué ocurre en mounted?

En mounted ya tienes ambos: el objeto data con tus variables y el elemento del DOM, que en este caso es un div con el texto Hola, Vue. Aquí ya puedes manipular el HTML con Vanilla JS o cualquier librería que necesite un nodo real para funcionar.

Este es el hook indicado para integraciones con librerías externas, mediciones de tamaño o cualquier acción que dependa de que el componente esté presente en la página.

¿Por qué importa el orden del ciclo de vida?

El comportamiento que observas en App.vue se repite en cada componente del árbol, desde el raíz hasta el último hijo. Si intentas acceder al DOM demasiado pronto, obtienes undefined; si esperas demasiado, puedes perder oportunidades de inicializar valores antes de renderizar.

Algunas reglas prácticas que se desprenden del ejercicio:

• Inicializa datos derivados o llamadas iniciales en created.
• Manipula el DOM o conecta librerías externas en mounted.
• Limpia listeners, timers o conexiones cuando el componente se desmonta.

Los hooks funcionan exactamente igual entre sí en cuanto a sintaxis. Lo único que cambia es el momento en que Vue los llama y, por tanto, a qué información puedes acceder dentro de ellos.

¿Cómo practicar el resto de los hooks del ciclo de vida?

El reto es replicar el mismo experimento con los demás hooks: beforeMount, beforeUpdate, updated, beforeUnmount y unmounted. La idea no es solo imprimir un console.log, sino observar con detalle qué partes del componente siguen disponibles y cuáles ya no.

Algunas preguntas guía mientras experimentas:

• ¿Puedes leer this.$el justo antes de montar el componente?
• ¿Qué pasa con los métodos y las propiedades computadas tras unmounted?
• ¿Sigue siendo accesible el objeto data cuando el componente se destruye?

Probar cada caso te da una intuición real sobre la reactividad de Vue.js y te prepara para depurar errores típicos cuando un componente intenta tocar algo que ya no existe. Comparte tus hallazgos en el sistema de comentarios para revisarlos en conjunto.