El ciclo de vida de los componentes en Vue

vueJS
Etiquetas:

Seguimos trabajando con Vue 3, y ahora toca profundizar en el ciclo de vida de los componentes, algo que es esencial conocer y que puede facilitar muchas cosas.

Básicamente, el ciclo de vida es todo lo que ocurre desde que va a nacer el componente, hasta su completa destrucción. En ese ciclo es posible el desarrollo y ejecución de múltiples eventos que nos permitirán concretar mucho más y mucho mejor para el desarrollo de nuestras aplicaciones.

Todas las instancias de cada componente llevan incluido una serie de pasos necesarios, cómo el inicio de data, el renderizado de template, el montaje de la instancia en el DOM o la actualización del DOM cuando cambia estado.

El ciclo de vida de un componente

Mi principal recomendación es que leas la documentación oficial, pero aquí te contaré a grandes rasgos lo que más te conviene saber. Estas acciones también se conocen como hooks.

Vue se caracteriza porque en la vida de un componente se llevan a cabo una serie de eventos que permiten controlar todo perfectamente. Lo mejor es mostrar el siguiente diagrama:

Ciclo de vida de un componente en Vue 3

Cuando se crea un componente, incluso antes de su creación, es posible ejecutar código (beforeCreated), así cómo una vez creado (created). El componente puede ser creado, pero aún no montado, y también se lanzan eventos antes y después (beforeMount y mounted).

Durante la actividad del componente, también se lanzan eventos antes de actualizarse y justo tras su actualización (beforeUpdate y updated). Y por último, cuando se termina la vida del componente, se lanzan eventos antes del desmontaje y una vez concluido: beforeUnmount y unmounted.

El ciclo de vida en Vue 2

Aunque estoy centrado en Vue 3, lo indicado aquí también está incluido en Vue 2, y los eventos del ciclo de vida de los componentes son los mismos, facilitando la compatibilidad entre versiones. Los cometidos son también exactamente los mismos.

Un poco más sobre hooks

El principal motivo para incluir los hooks dentro de los componentes tiene diversos propósitos. Así, los eventos de creación son ideales para la asignación de valores por defecto, o bien recuperar valores externos (cómo por ejemplo, del localStorage). Para los datos asíncronos o solicitudes AJAX, lo ideal es hacerlo una vez creado, en created.

El montado del componente es el periodo de tiempo en el cual el componente se incorpora al DOM. mounted es el evento que deberás usar una vez el componente es agregado al DOM (beforeMounted lo usarás poco!) y también puede servirte para inicializar librerías externas, o ejecutar llamadas asíncronas.

Los eventos update son los que tienen lugar cuando el componente o alguna de sus partes necesita ser renderizado de nuevo. Normalmente, esto sucede cuando se actualiza algún valor del mismo. Yo personalmente, casi no los he utilizado, y me he ayudado más de las propiedades computadas que de este tipo de eventos.

Por último, cuando el componente ya no se necesita, éste se destruye provocando que dos nuevos eventos sucedan: uno justo antes de destruir y otro una vez eliminado del DOM. Éste será buen momento para eliminar los eventos escuchadores (removeEventListener) o los timers (clearInterval), o bien la destrucción de datos del localStorage.

Los hooks que más utilizo yo

Créeme que estos eventos del ciclo de vida de los componentes son bastante prácticos, algunos, y tarde o temprano los acabarás incluyendo en tus componentes. Yo el que más utilizo es created, mounted y beforeDestroy por lo que ya he comentado: porque me permiten recuperar información asíncrona antes de empezar a trabajar (ojo, si usar async await deberás incluir estas keywords!!), para recuperar información de Vuex, o para eliminar eventos o los timers.

Y poco más! Happy coding!!!!