Explorando los primeros hooks del ciclo de vida de Vue

Ciclo de vida de los componentes en Vue.

Cada componente es una instancia de un componente de Vue los cuales están cambiando periódicamente. en algún momento los componentes son creados o destruidos cuando estos salen del DOM. Vue nos ofrece funciones para ejecutar código antes de que un componente se monte o después de que este se haya retirado del DOM.

Como traer datos cuando se renderiza, un componente y rellenarlo con esos datos.

los hooks del ciclo de vida son:

• beforeCreate Se llama cuando la instancia se inicializa, después de que las props se resuelven y antes de procesar opciones como data() o computed

  beforeCreate(){
    //código a ejecutar
  }
  

• created se llama cuando la instancia ha terminado de procesar todas las opciones relacionados con el estado, como lo son: datos reactivos, propiedades computadas, métodos y observadores, pero aún no comienza la fase de montado y la función $el aún no esta disponible.

  created(){
    //lógica a ejecutar
  }
  

• beforeMount Se llama cuando el componente ha sido montado, pero no existen nodos en el DOM aún, pero están a punto de ser ejecutado el render el DOM por primera vez, no se llama su usamos renderizado del lado de servidor.

  beforeMount(){
    //lógica  a ejecutar
  }
  

• mounted Se llama cuando el componente ha sido montado, se considera montado cuando: todos sus componentes hijos síncronos han sido montados, no se incluyen los asíncronos o los que estén en modo suspendido <Suspense> , cuando su propio árbol del DOM ha sido creado e insertado en su contenedor padre. Tampoco es llamado durante renderizado del lado del servidor

  mounted(){
    //logica a ejecutar
  }
  

• beforeUpdate Se llama justo cuando el componente esta por actualizar su árbol del DOM, debido a un cambio reactivo. Este hook se puede usar para acceder al DOM justo cuando Vue esta por hacer un cambio.

  beforeUpdate(){
    //logica a ejecutar
  }
  

• updated Se llama justo cuando el componente ha sido actualizado por un cambio en su estado, En caso del padre su método se llamará cuando los métodos de sus hijos hayan terminado. Es importante tener cuidado si no somos precavidos podemos provocar ciclos de renderizado infinito.

  updated(){
    //logica a ejecutar
  }
  

• beforeUnmount Se llama justo cuando la instancia esta por salir del DOM, cuando usamos este hook la instancia que esta por salir aun es funcional

  beforeUnmount(){
    //logica a ejecutar
  }
  

• unmounted se llama cuando el componente es desmontado, un componente se considera desmontado cuando: todos su hijos han sido desmontados y todos sus efectos reactivos se han detenido, este hook se utiliza cuando queremos limpiar de manera manual algunos efectos como cuentas regresivas, conexiones con el server o eventos del DOM.

  unmounted(){
    //logica a ejecutar
  }
  

Todas se colocan dentro del objeto de configuración de la option API como una opción más.

Hice algo pequeño para actualizar el texto del componente

En el beforeCreate no se creado el componente ni todas las variables, por lo cual me retorna un objeto vacio.

En created ya tengo acceso a los datos por que ya se ejecuto algun instancia, pero como no se ha monatado aun no me muestra ningun elemento del DOM.

En mount ya existe el componente por completo, ya se puede visualizar.

Este es ORO!!

Mi humilde ofrenda

let vm = Vue.createApp({
  data() {
    return {
      message: "Hello world!",
    };
  },
  beforeCreate() {
    console.log("beforeCreate() function called!", this.message);
  },
  created() {
    console.log("created() function called!", this.message);
  },
  beforeMount() {
    console.log("beforeMount() function called!", this.message);
  },
  mounted() {
    console.log("mounted() function called!", this.message);
  },
  beforeUpdate() {
    console.log("beforeUpdated() function called!");
  },
  updated() {
    console.log("updated() function called!");
  },
  beforeUnmount() {
    console.log("beforeUnmount() function called!");
  },
  unmounted() {
    console.log("unmounted() function called");
  },
});

vm.mount("#app");

Yo diría que beforeCreate se establecerá primero en la terminal porque en teoría es lo primero que se carga.

Con created diría que saldrá en la terminal una vez cargue el componente.

Y el mounted se establecerá una vez el componente ya se pueda visualizar.

Según la documentación de Vue 3 Life Cycle, ya no están los beforeCreated & created.

Estuve probando el consumo de APIs y cuando haces el llamado en beforeCreate, te sale un error

Ojo, el error me salta porque en beforeCreate no encuentra el método

<template>
  <p>{{text}}</p>
</template>

<script>
export default {
  name: 'App',
  components: {  },
  data: () => ({
    text: "Zangana",
  }),
  methods: {
    async getPokemon() {
      const URL = 'https://pokeapi.co/api/v2/pokemon/255';
      const response = await fetch(URL);
      const data = await response.json();
      this.text = data.name;
      console.log(data);

    }
  },
  beforeCreate() {
    console.log("Before create", this.$data, this.$el);
// Aca no funciona getPokemon()

  },
  created() {
    console.log("created", this.$data, this.$el);
		// Aca funciona getPokemon()
    setTimeout(() => this.getPokemon(), 3000);
  },
  mounted() {
    console.log("Mounted", this.$data, this.$el);
		// Aca  funciona getPokemon()
  }
}
</script>

Los ciclos de vida que hay en vue, son muy similares en Angular y React. Aunque Angular es más fácil de llevar los estados que React, en mi caso