No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Ciclo de Vida y Hooks

20/38
Recursos

Aportes 21

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

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:

  1. beforeCreate.
  2. created.
  3. beforeMount.
  4. mounted.
  5. beforeUpdate.
  6. updated.
  7. beforeDestroy.
  8. destroyed.

Lifecycle Hooks
.
Los hooks son diferentes eventos que podemos representar dentro de nuestros componentes a trav茅s de funciones, con lo cual podemos disparar c贸digo a medida que nuestra componente transite por estas diferentes etapas.
.
https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram
.
Seg煤n la documentaci贸n oficial de Vue, los estados que transita un componente son:

  1. beforeCreate
  2. created
  3. beforeMount
  4. mounted
  5. beforeUpdate
  6. updated
  7. beforeDestroy
  8. destroyed
    .
    Para su implementaci贸n se utilizan como funciones dentro de la configuraci贸n de nuestro componente (al nivel de data, methods, etc), son parte del core de VueJS
created(){
console.log('Created...')
},

created es bueno para obtener informaci贸n de una API Rest porque es de lo primero que ocurre dentro del ciclo de vida. En el mounted ya est谩 disponible el DOM, para poder acceder informaci贸n como el HTML.

Enlace al diagrama del ciclo de vida de Vue: https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

En el examen seleccion茅 beforeCreate y apareci贸 incorrecta.
Imagen

驴Cuando lo arreglar谩n o estoy equivocado?

no dormire el dia de hoy jxjxx

LIFE CYCLE HOOKS (IMAGEN2)

    - Ciclo de vida de los componentes - a medida que se crean los componentes se pueden lanzar eventos
    - Por ejemplo cuando se crea el componente, cuando se destruye, cuando se actualiza
    - CREATED: Es bueno usarlo cuando se tiene que usar informaci贸n desde un servidor
    - MOUNTED: Ya tienes disponible informaci贸n del DOM (Es el evento que se ejecuta cuando se agrega al DOM)

En la documentaci贸n encontr茅 otros tres hooks que no se mencionaron:

  • activated: Se llama cuando se activa un componente que se mantiene vivo.
  • deactivated: Se llama cuando se desactiva un componente que se mantiene vivo.
  • errorCaptured: Se llama cuando se captura un error de cualquier componente descendiente. El hook recibe tres argumentos: el error, la instancia del componente que desencaden贸 el error y una cadena que contiene informaci贸n sobre d贸nde se captur贸 el error. El hook puede devolver falso para evitar que el error se propague m谩s.

No se si entend铆 mal, pero tengo entendido que el ciclo de vida es el el siguiente orden:

  1. beforeCreate
  2. created
  3. beforeMount
  4. Mounted
  5. beforeUpdate
  6. updated
  7. beforeDestroy
  8. destroyed

Sin embargo en el examen los presentan, y preguntan cual se ejecuta primero, y al seleccionar beforeCreate indica que es err贸neo鈥︷煠

20.-Ciclo de Vida y Hooks

Los hooks son diferentes eventos que podemos representar en nuestro componente a trav茅s de funciones y podemos disparar c贸digo a medida que nuestro componente vaya transitando por diferentes etapas. Es decir, cada que el componente se crea podemos manejar ese evento y disparar alguna funci贸n, tambi茅n cuando se destruye o actualice el componente podemos manejar una funci贸n.

El created es bueno para obtener info de un API Rest, ya que es de los primeros eventos que ocurren dentro del ciclo de vida de componentes.

El mounted ya tiene disponible el DOM entonces podemos acceder a info del DOM como elementos HTML o diferentes cosas que no tenemos en created.

Si los ponemos tambi茅n en el componente hijo podemos ver como se crea primero el componente principal seguido por el hijo, pero se monta primero el hijo y luego el principal.

created() es un buen lugar para llamar informacion dinamica de un servidor o una api.
.
mounted() puedo acceder a informacion del DOM como elementos HTML

Es curioso que en react y vue el concepto de hooks sea distinto, a pesar de ser la misma palabra 馃ぃ馃ぃ馃榿.

Esto del ciclo de vida me recuerda mucho a el ciclo de vida de una aplicaci贸n, el created puede ser usado para consumo de API鈥檚 por lo que veo, aunque no estoy seguro si as铆 se hace de forma 鈥減rofesional鈥, habr铆a que seguir el curso:3

Ciclo de Vida y Hooks

Podemos manejar los ciclos de vida con funciones.

Hooks del Ciclo de vida de la instancia

created() {
    console.log('Componente creado')
  },

  mounted() {
    console.log('Componente montado')
  },

Ciclo de Vida de los Componentes y Hooks

O Lifecycle Hooks de VueJS son diferentes eventos que podemos representar a trav茅s de funciones y es posible disparar c贸digo a medida que el c贸digo vaya transitando en diferentes etapas, cada vez que el componente se crea, se puede manejar ese evento y disparar alguna funci贸n, o cada vez que el componente se destruye, o cu谩ndo 茅ste se actualiza por alguna modificaci贸n.

Los estados o Hooks por los que transita un componente son:

  1. beforeCreate.
  2. created.
  3. beforeMount.
  4. mounted.
  5. beforeUpdate.
  6. updated.
  7. beforeDestroy.
  8. destroyed.

Estos son nuevas configuraciones que tenemos dentro del componente como lo son el, data, methods o computed.

Created es bueno para obtener informaci贸n de una REST API. Es uno de los primeros eventos que ocurren dentro del ciclo de vida de un componente. SI por ej. Tengo que obtener informaci贸n de un servidor o desde una API es un buen lugar para hacerlo e inyectar con informaci贸n din谩mica el componente.

Mounted ya se tiene disponible el DOM, gracias a ello ya se puede tener acceso a informaci贸n como elementos HTML que no se tiene en el estado Created.

Los componentes en Vue cuentan con un ciclo de vida, tambi茅n conocido como Life Cicle Hooks. estos hooks son eventos que se pueden representar a trav茅s de funciones y que se disparan a medida que el componente vaya pasando por las diferentes etapas del ciclo de vida.

Los hooks de Vue son (en ese orden):

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestry
  • destroyed

Para usar estos hooks, se declaran como funciones dentro de la instancia del componente donde se quieran usar, al mismo nivel que data, computed, etc.

Created es un buen hooks para traer informaci贸n desde una API ya que es uno de los que suceden primero. En mounted ya est谩 disponible el DOM.

Cada componente tiene un ciclo de vida propio e independiente.

  • 驴Por que se atacha al DOM el componente Hijo antes que el Padre?
  • 驴En React tambien pasa lo mismo?

A d铆a de hoy (2021-02-08) VueJS llega hasta la versi贸n 3!

Os dejo los enlaces de la documentaci贸n oficial sobre el ciclo de vida en esas 2 versiones

Lifecycle Hooks
V2
V3

馃憣

Me hace recordar los estados de React: componentDidMount, ComponentDidUpdate, componentWillUnmount 馃榿