Un componente de Vue no se aparece magicamente en nuestra pagina web, estos pasan por todo un ciclo a traves del cual se crean, se montan en nuestra pagina, cambian y, en algunos casos, se destruyen. Hoy veremos que beneficios nos trae conocer estas etapas.
¿Que etapas forman parte del ciclo de vida?
El ciclo de vida esta compuesto por varias pasos, llamados hooks , con cada uno de ellos ejecutandose en momentos especificos de la vida de nuestro componente, y con caracteristicas especificas de cada uno. Estos son:
- Created: El componente existe pero no se encuentra en el DOM.
- Mounted: Componente insertado en el DOM, en este hook se lo renderiza en la pagina
- Updated: Ocurre cuando cambia algun cambio en alguna propiedad
- Destroyed: Cuando el compoente es elminado del DOM, como es facil deducir, el componente ya no es utilizable una vez que llega a este punto.
A su vez, cada uno de estos cuenta con una hook previo, que se ejecuta en el momento antes de que se ejecuten loos hooks principales, estos hooks previos se llaman : beforeCreate, beforeMounted, beforeUpdate y beforeDestroy, respectivamente.
A continuacion explicaremos cada uno por separado y analizando tiene cada uno.
Creacion
Estos son los primeros hooks que se ejecutaron en nuestro componente. Estos permite realizar acciones apenas nuestro componente exista, antes de que se hayan añadido al DOM,. A diferencia de los otros hooks, son los unicos que se ejecutan durante el server-side rendering, justamente por esto se recomienda usarlo cuando se necesite realizar cambios tanto en el renderizado del lado del cliente como del servidor.
BeforeCreate
Este hook se ejecuta apenas se haya inicializado el componente, en esta instancia tanto la informacion como los eventos del componente no estan listos aun. O sea que el componente no es funcional aun, realmente no tiene mucho mas que realizar alguna accion antes de que el componete realice nada.
Created
En esta instancia el componente ya “existe”, ya es funcional, se encuentra disponible la informacion dentro del atributo data del componente y los eventos ya estan activo. Sin embargo, si se para la ejecucion en este momento no se visualizará el componente en la pagina,ya que el template del componente no esta renderizado y tampoco se encuentra montado en el DOM
Montado
En general son los hooks mas utilizados para que un componente realice acciones cuando se carga en nuestra pagina. Sin embargo,estos hooks deberian reservarse para hacer modificaciones del DOM de nuestro componente o modificaciones al momento de que este se renderiza, si se necesita configurar el componente, seria mas adecuado utilizar los hooks de creacion.
BeforeMount
Este hook se ejecuta antes de que se renderize el componente y despues de que las funciones template o render se hayan compilado. En general este hook no encuentra muchos usos
Mounted
En este punto ya se tiene acceso a todo el componente, el template y todo esta integrado en el DOM. Este hook es muchas veces el mas utilizado ya que se tiene el componente completamente funcional y disponible, pero esto no quita que tener buenas practicas de diseño y utilizar cada hook de manera inteligente y no llenar nuestro Mounted con absolutamente todo lo que hagamos.
Actualizacion
Es muy comun que nuestro componente sufra cambios o modificaciones cuando se encuentra en nuestro sitio y cuando estos ocurren y nos interesa realizar acciones en base a estos cambios, podemos utilar estos hooks que se ejecutan cuando ocurre algun cambio de alguna propiedad reactiva de nuestro componente o alguna variable que utilice para su renderizado.
BeforeUpdate
Este hook ocurre justo antes de que el ciclo de actualizacion comience, previo a que el DOM se modifique y que el componente se re-renderize. Es util para obtener el nuevo estado del componente antes de que este cambio se vea reflejado en el componente, en otras palabras, antes de que se modifique el DOM y se re-renderize el componente.
Updated
Despues de que se han efectuado los cambios en el DOM y se ha vuelto a renderizar el componente, es el hook indicado si despues de un cambio se necesita realizar acciones con el nuevo estado que ha adquirido este.
Destruccion
Si bien es poco usual, a veces uno puede necesitar deshacerse de un componente y en estos casos, estos hooks nos permiten realizar operaciones antes de que esto ocurra. Cabe destacar que a pesar de que un componente sea destruido, este seguira estando renderizado en la pagina, y la infomacion dentro de el seguira estando disponible, sin embargo ya no estara escuchando eventos ni pasará por los hooks de actualizacion, el ciclo de vida ha terminado y se deberá crear de nuevo el componente si se lo quiere utilizar.
BeforeDestroy
Este es el ultimo momento en el que el componente esta completamente intactio y se mantiene funcional,es un buen momento para limpiar el componente. O utilizar funcionaliades del mismo por ultima vez.
Destroyed
La ultima etapa del ciclo de nuestro componente, nuestro componente seguirá renderizado en nuestra pagina, sin embargo, es de lo poco que queda de el. Cosas como los event listeners y las directivas ya no se encuentran funcionales, lo que hace que este hook no sea de mucha utilidad, puede usarse para realizar alguna limpieza (remover algun listener que no se haya borrado automaticamente) o enviar un mensaje indicando que ese componente fue destruido
Conclusion
Conocer como es el ciclo de vida de nuestro componente es importante, ya que nos ayuda a entender como funcionar por detras nuestra aplicacion y nos puede ayudar a la hora de ver que ocurre con nuestro componente cuando tengamos algun problema.