Hooks y Ciclo de Vida de Componentes en VUE

Cuando programamos en VUE es importante conocer los Hooks y Ciclo de Vida de Componentes que permiten realizar acciones en los diferentes momentos de la ejecución de un programa, en este artículo se muestra todo lo que tienes que saber para dominar los diferentes hooks de VUE.

Si quieres aprender a programar en Java sigue este link.

1. Ciclo de Vida de los Componentes

En la siguiente imagen se puede observar los diferentes estados de un componente en VUE.

Siempre que VUE carga un componente sigue este patrón, y puede observar como cada estado esta precedido de uno anterior llamado before, por ejemplo antes de ser creado un componente se leen los datos y antes de ser montado se lee la plantilla o template, de forma similar y quizás el más importante por comprender es que antes que se actualicen los datos estos serán actualizados en el DOM o página web. y el ciclo en la actualización ocurre cada vez que un dato es cambiado, por eso la sección de data es tan importante porque las variables que se definen allí permiten cambiar el estado de los componentes y refrescarlos en la página web.

2. Hooks disponibles en los Componentes

Cada uno de los estados del ciclo de vida de los componentes en VUE tiene un hook, en este caso un método especial que es definido al mismo nivel de la data, el nombre o los métodos y que hace parte de la instancia de VUE como tal, estos métodos pueden ser sobreescritos ya sea uno o varios para cambiar el comportamiento o definir acciones que se quieran realizar en alguno de los momentos en el Ciclo de Vida de los Componentes en VUE.

El siguiente código muestra la sección de script de un componente VUE con la definición de todos los Hooks.

  <script>
  export default {
    name: 'Entrada',
    beforeCreate() {
      console.log('beforeCreate');
    },
    created() {
      console.log('created');
    },
    beforeMount() {
      console.log('beforeMount');
    },
    mounted() {
      console.log('mounted');
    },
    beforeUpdate() {  
      console.log('beforeUpdate');
    },
    updated(){
      console.log('updated');
    },
    beforeDestroy() {
      console.log('beforeDestroy');
    },
    destroyed() {
      console.log('destroyed');
    }
  }
  </script>

3. Artículos de Interés