No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Explorando los primeros hooks del ciclo de vida de Vue

10/23
Recursos

Aportes 9

Preguntas 0

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

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