Читать книгу Aprender VueJS con 100 ejercicios prácticos - Angel Vazquez Vazquez - Страница 13

Se denomina ciclo de vida de una instancia Vue a una serie de estados por los que va pasando el componente. Estos estados son básicamente cuatro: created, mounted, updated y destroyed.

Vue nos permitirá definir acciones anteriores y posteriores a la transición desde o hacia cada estado interno del componente. Los métodos en cuestión para implementar estas acciones son:

• beforeCreate: evento lanzado antes de tener el componente cargado, implica no poder acceder al componente a nivel de Dom.

• created: evento donde se verifica si el componente tiene plantilla, entonces se compila y se observan las propiedades computadas, data, métodos y eventos. Pero no podemos acceder al $el.

• beforeMount: evento que ocurre antes de representar el componente.

• mounted: evento que implica que el componente está cargado por completo, se añade al DOM, quedando el componente accesible a través de $el.

• beforeUpdate: evento que se ejecuta cuando el valor del data del componente cambia.

• updated: evento invocado tras finalizar la modificación de valor del data.

• beforeDestroy: evento que elimina eventos que estuvieran activos en el componente, antes de eliminar la instancia.

• destroyed: evento lanzado tras desacoplar el componente.

En estos métodos podremos reservar o liberar recursos, realizar cálculos, hacer llamadas http, etc.

Para ilustrar mejor cómo funciona el ciclo de vida implementaremos cada uno de estos métodos escribiendo en una consola del navegador un mensaje por cada vez que entre en los métodos mencionados [1].

Una vez que carga la página vemos que la instancia es creada, cargada en el DOM y está disponible cuando pasa al estado mount [2].

Para comprobar qué pasa cuando actualizamos el componente podemos editar el texto ”Hola Vue!” [3] y añadir alguna modificación para ver que pasa por los métodos beforeUpdate y updated [4].

En el caso de que eliminemos el componente podremos forzar su destrucción a través del botón Destroy comprobar que la instancia pasa por los métodos beforeDestroy y destroyed [5].