Ciclo de Vida de Componentes en Vue.js: Práctica con Hooks

Clase 10 de 23 • Curso de Vue.js: Componentes y Composition API

Resumen

¿Cómo se ve el ciclo de vida de los componentes en Vue?

El ciclo de vida de los componentes en Vue es una herramienta crucial para los desarrolladores, permitiendo gestionar el tiempo de vida de un componente desde su creación hasta su destrucción. En este ejemplo práctico, exploraremos cómo funcionan los hooks del ciclo de vida en un componente Vue, ejecutando código JavaScript en etapas específicas para obtener un mayor control sobre el comportamiento de nuestros componentes.

¿Qué hooks del ciclo de vida podemos usar?

Vue ofrece varios hooks que podemos utilizar para ejecutar código en diferentes etapas del ciclo de vida de un componente. Algunos de los hooks más comunes son:

beforeCreate: Se ejecuta antes de que el componente sea creado.
created: Se ejecuta después de que el componente ha sido creado.
mounted: Se ejecuta una vez que el componente ha sido insertado en el DOM.
unmounted: Se ejecuta cuando el componente ha sido removido del DOM.

Ejemplo práctico

A continuación, presentamos un script que implementa algunos de estos hooks dentro de un componente Vue, mostrando cómo y cuándo podemos acceder a diferentes partes del componente:

export default {
  data() {
    return {
      text: 'Hola, Vue',
    };
  },
  beforeCreate() {
    console.log('beforeCreate: ', this.data, this.el);
  },
  created() {
    console.log('created: ', this.data, this.text);
  },
  mounted() {
    console.log('mounted: ', this.data, this.$el);
  }
}

¿Qué sucede con los objetos data y DOM en cada hook?

Al ejecutar el script anterior y observar los resultados en el navegador, podemos analizar el comportamiento de los diferentes hooks:

beforeCreate:
- En este punto, el objeto data está vacío y el elemento del DOM (this.el) aún no existe. No se han inicializado las variables reactivas de Vue.
created:
- Aquí, el objeto data ya ha sido creado y la variable text está disponible.
- Sin embargo, el elemento del DOM aún no está disponible, puesto que el componente no ha sido montado.
mounted:
- En este momento, tanto el objeto data como el elemento del DOM están presentes.
- Esto permite interactuar con el DOM utilizando JavaScript puro, pudiendo modificar o acceder al HTML del componente.

¿Cómo experimentar con otros hooks del ciclo de vida?

Te invito a implementar los demás hooks que ofrece Vue.js para experimentar con los resultados. Algunos ejercicios prácticos pueden incluir:

Probar el hook beforeDestroy para ver qué sucede cuando un componente está a punto de ser destruido.
Utilizar updated para responder a cambios en las propiedades del componente.
Experimentar con beforeUnmount para verificar el estado de las variables antes de que un componente sea desmontado.

Una invitación a la práctica

Te animo a que examines cada uno de los hooks y compartas tus hallazgos e implementaciones en nuestra plataforma de contribuciones de comentarios. Esta práctica no solo te ayudará a entender mejor los componentes de Vue.js, sino que también fomentará el aprendizaje colaborativo. ¡Sigue explorando y compartiendo! Nos encontraremos en la próxima clase para seguir profundizando en Vue.js.

Alvaro Moises Gonzalez Quintero

student•

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.

Jose Morales Varon

student•

Buena info

Luis Rodriguez

student•

gracias excelente referencia

Miguel Angel Reyes Moreno

student•

Hice algo pequeño para actualizar el texto del componente

Jose Alejandro Pantoja Giraldo

student•

Este es ORO!!

Dufainder Bedoya

student•

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.

Rafael Soriano Ramírez

student•

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");

Diego Reyes

student•

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.

Diego Reyes

student•

Lol, estuve en lo correct, espero les sirva mi comentario

Luis Fernando Rodriguez Boett

student•

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>

Juan Guillermo Perez Cardozo

student•

un clásico hacer llamados rest a la pokeApi

Luis Fernando Rodriguez Boett

student•

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