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