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
<template> <div :class="typeError" v-show="showModal" v-text="msnModal"></div> </template> <script> export default { props: ['typeError','msnModal','showModal'], data () { return { type: null } }, computed: { typeModal () { return this.type } }, // Inicio Ciclo de vida beforeCreate () { console.log('1 - beforeCreate') }, created () { console.log('2 - created') }, beforeMount () { console.log('3 - beforeMount') }, mounted () { console.log('4 - mounted') }, beforeUpdate () { console.log('5 - beforeUpdate') }, updated () { console.log('6 - updated') }, beforeDestroy () { console.log('7 - beforeDestroy') }, destroyed () { console.log('8 - destroyed') } // Fin Ciclo de vida } </script> <style scoped> .error { background: #ef8c8c; padding: 20px; color: #ffffff; } </style>