Programación usando VueJS (Ciclo de vida en Vue). Parte 5
El ciclo de vida en Vue
Ya que en las entradas anteriores aprendimos a crear componentes, en esta ocasión aprenderemos como funciona una parte importante de Vue y que afecta directamente a los componentes.
Los componentes tienen unos estados por los que se tiene que pasar cuando los usamos, y ese proceso es conocido como ciclo de vida.
A continuación un diagrama del ciclo de vida de un componente en Vue:
Vue tiene diferentes estados y esto nos permite usar ciertas acciones antes y después de cada estado.
A estas acciones se las conoce como hooks y tienen unos propósitos claros:
- Nos permite conocer como se crea, actualiza y se destruye un componente.
- Podemos saber en que punto se encuentra el componente y poder actuar en consecuencia.
A continuación vamos a ver los hooks que nos ofrece Vue:
- beforeCreate: Su ejecución es justo después de la inicialización de la instancia y antes de que el componente este creado.
- created: Se ejecuta cuando la instancia, eventos, computed properties, el data y los métodos están creados. Normalmente se utiliza para inicializar propiedades del objeto data, llamadas a servicios, etc… En este punto el componente no esta en el DOM todavía.
- beforeMount: Su ejecución es justo antes de que se añada al DOM.
- mounted: Su ejecución es después de añadirlo al DOM, y se puede utilizar para inicializar librerías que dependan del DOM.
- beforeUpdate: Su ejecución es cuando el objeto data cambia, pero el DOM aun no ha realizado los cambios.
- updated: Su ejecución es después de que el objeto data cambie y el DOM muestre estos cambios.
- beforeDestroy: Su ejecución es justo antes de eliminar la instancia.
- destroyed: Su ejecución es cuando la instancia, eventos, directivas e hijos del componente se han eliminado.
A continuación el código de el componente que hemos creado en la anterior entrada y un vídeo con el funcionamiento:
filmModal.vue