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>