Cada componente en Vue.js nace, se actualiza y eventualmente desaparece. Comprender este proceso es fundamental para escribir código eficiente, controlar cuándo se cargan datos y limpiar recursos cuando ya no son necesarios. Los hooks de ciclo de vida son las funciones que Vue.js pone a tu disposición para que ejecutes código en cada una de estas etapas.
¿Por qué los componentes tienen un ciclo de vida?
Vue.js trabaja a través de un Virtual DOM, y cada componente es una instancia de un objeto de Vue [0:12]. Piensa en una aplicación como una red social: los usuarios abren pestañas, aparecen nuevos posts, se escriben o eliminan mensajes. Todo eso provoca que elementos aparezcan y desaparezcan de la pantalla constantemente.
Cada uno de esos elementos es un componente que se muestra en el DOM o en el Virtual DOM. Por lo tanto, en algún momento se crean y en otro momento son destruidos y eliminados de la memoria [0:52]. Vue.js ofrece una forma ordenada de manejar esto mediante funciones conocidas como hooks de ciclo de vida.
¿Qué sucede cuando se crea un componente?
Al ejecutar las funciones createApp y mount, se crea una instancia raíz de Vue.js que inicializa todos los eventos y las funciones del ciclo de vida [1:28]. A partir de ahí ocurre lo siguiente:
- beforeCreate: se ejecuta antes de que el componente comience a crearse. Es opcional, pero permite correr código en esa etapa temprana [1:44].
- El componente pasa a un estado inicializado, donde ya puede leer datos desde provide/inject y hacer uso de la reactividad de Vue.js [1:58].
- created: el componente ya se creó. Aquí es un buen momento para comenzar a descargar datos o sincronizarse con otros componentes [2:14]. Sin embargo, todavía no existe un elemento en el DOM.
¿Cómo se monta y renderiza el componente?
Después de la creación, Vue.js realiza la renderización del template. Si no hay template, se salta este paso o toma el HTML existente. Aprovecha el acceso a las variables reactivas para renderizar todo el contenido [2:44].
- beforeMount: se ejecuta justo antes de que el componente se inserte en el DOM [3:02].
- Vue.js crea el elemento en el DOM (o Virtual DOM), obtiene la referencia y la asigna al componente mediante la variable
$el, que contiene el elemento HTML para acceder directamente a él [3:12].
- mounted: el componente ya está en el DOM. Puedes acceder a sus atributos con Vanilla JS o Vanilla HTML y traer datos adicionales [3:30].
¿Qué pasa cuando el componente se actualiza?
Una vez montado, el componente entra en un ciclo de espera donde reacciona a cambios en los datos gracias a la reactividad y a eventos del usuario [3:48]. Cada vez que hay un cambio:
- beforeUpdate: se ejecuta antes de aplicar el cambio. Ya tiene acceso al elemento en el DOM y a todas las variables reactivas del componente [4:02].
- Vue.js realiza la actualización del DOM, renderiza los cambios en pantalla.
- updated: confirma que el componente ya se actualizó y permite ejecutar código posterior a la modificación [4:18].
¿Cómo se destruye un componente correctamente?
Cuando un componente debe desaparecer —porque se eliminó de una lista o se llamó la función unmount— comienza el proceso de destrucción [4:30].
- beforeUnmount: se ejecuta antes de que el componente se destruya. Es el momento ideal para limpiar variables, eliminar referencias a datos externos o cerrar conexiones al servidor [4:44].
- El componente pasa a un estado desmontado: ya no existe en el DOM y dejará de existir en memoria.
- unmounted: es la última función que se ejecuta. Puede servir para notificar a otros componentes que este ya desapareció [5:04].
Todas estas funciones se colocan dentro de las options del componente [5:20]. Desde el componente raíz hasta el último de sus hijos, todos comparten estos mismos hooks de ciclo de vida. Tener claro este flujo te permite estructurar mejor tus componentes, controlar la carga de datos en el momento preciso y liberar recursos de forma limpia.
¿Ya habías trabajado con alguno de estos hooks? Comparte en los comentarios cuál te resulta más útil en tus proyectos.
