El ciclo de vida en Vue.js define cómo un componente nace, se actualiza y desaparece dentro del virtual DOM. Entenderlo te permite ejecutar código en momentos exactos, optimizar tu app y manejar datos con precisión. Si trabajas con Vue.js, dominar estos hooks cambia la forma en que estructuras tus componentes.

Cada componente en Vue.js es una instancia que cambia constantemente. Piensa en una red social: abres pestañas, llegan mensajes nuevos, eliminas posts. Todos esos elementos aparecen y se destruyen en pantalla, y cada uno tiene un recorrido propio dentro del framework.

¿Qué es el ciclo de vida de un componente en Vue.js?

Es el recorrido que hace cada componente desde que se crea hasta que se elimina de la memoria. Vue.js te da funciones específicas, llamadas hooks, para intervenir en cada fase de ese recorrido [1:30].

¿Qué son los hooks de ciclo de vida en Vue.js? Son funciones opcionales que ejecutan código en momentos específicos: antes de crear el componente, después de montarlo, antes de actualizarlo o cuando se destruye. Las defines dentro de las options de tu componente.

¿Cómo inicia un componente con createApp y mount?

Cuando ejecutas createApp y mount, Vue.js crea una instancia raíz que inicializa todos los eventos y los hooks del ciclo de vida [2:10]. Es el punto cero: aquí arranca todo lo demás.

A partir de ahí, el componente entra en una secuencia ordenada que puedes intervenir con código propio.

¿Cuáles son las fases de creación y montaje?

La primera mitad del ciclo se enfoca en preparar el componente y colocarlo en el DOM. Cada paso tiene un hook asociado que puedes aprovechar.

¿Qué hace beforeCreate y created?

El hook beforeCreate se ejecuta antes de que el componente comience a crearse. Es opcional, pero útil si necesitas correr código antes de cualquier inicialización [2:35].

Después, el componente pasa a un estado inicializado donde ya puede leer datos desde provideInject y usar la reactividad de Vue.js. En ese momento se dispara created, ideal para empezar a descargar datos o sincronizarte con otro componente [3:05]. Eso sí, todavía no existe un elemento en el DOM, solo la definición del componente.

¿Qué hace beforeMount y mounted?

Vue.js renderiza el template aprovechando las variables reactivas. Justo antes de colocar ese resultado en el DOM, ejecuta beforeMount [3:50].

Luego crea el elemento real, lo asigna al componente y te da acceso mediante la variable $el, que contiene el HTML por si quieres manipularlo directamente. Una vez montado, se dispara mounted, perfecto para traer datos o acceder a atributos con Vanilla JS [4:30].

¿Cómo funcionan las actualizaciones y la destrucción?

Después del montaje, el componente entra en un ciclo de espera donde reacciona a cambios de datos y eventos del usuario. Aquí entran en juego los hooks de actualización y desmontaje.

¿Qué hacen beforeUpdate y updated?

Cada vez que cambia un dato reactivo, Vue.js ejecuta beforeUpdate antes de modificar el DOM. En ese momento ya tienes acceso al elemento en pantalla y a todas las variables reactivas [5:15].

Luego actualiza el DOM, renderiza los cambios y dispara updated, donde puedes correr cualquier código posterior a la actualización visual.

¿Cuándo usar mounted en vez de created? Usa created para tareas que no dependen del DOM, como pedir datos iniciales. Usa mounted cuando necesitas el elemento ya renderizado en pantalla, por ejemplo para medir su tamaño o aplicar librerías externas.

¿Qué hacen beforeUnmount y unmounted?

Cuando un componente debe desaparecer, ya sea porque lo eliminaste de una lista o porque llamaste a unmount desde JavaScript, Vue.js ejecuta beforeUnmount. Aquí limpias variables, cierras conexiones al servidor o eliminas referencias externas [6:20].

Después, el componente entra en estado desmontado y deja de existir en memoria. Como último paso se dispara unmounted, útil para notificar a otros componentes que este ya desapareció [6:50].

¿Por qué importan los hooks para estructurar tu app?

Los hooks de ciclo de vida te dan control fino sobre cuándo ocurre cada cosa. Saber dónde colocar cada pieza de código evita bugs, mejora el rendimiento y hace que tus componentes sean predecibles.

Estos son los hooks que puedes definir dentro de las options de un componente Vue.js:

• beforeCreate: antes de crear la instancia.
• created: instancia lista, sin DOM aún.
• beforeMount: antes de insertar en el DOM.
• mounted: ya está en pantalla.
• beforeUpdate: antes de aplicar cambios reactivos.
• updated: cambios ya reflejados en el DOM.
• beforeUnmount: antes de destruir el componente.
• unmounted: componente eliminado de memoria.

Desde el componente raíz hasta el último hijo, todos comparten este mismo flujo. Tenerlo claro te permite decidir con criterio dónde pedir datos, dónde limpiar recursos y dónde reaccionar a cambios.

¿Ya identificaste en cuál hook meterías la llamada a tu API? Cuéntame en los comentarios cómo lo estás resolviendo en tu proyecto.