Ciclo de Vida y Hooks

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.

no dormire el dia de hoy jxjxx

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…🤔

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.

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’s por lo que veo, aunque no estoy seguro si así se hace de forma “profesional”, habría que seguir el curso:3

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

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

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

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.

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.

La documentación de Vue dice lo siguiente sobre el diagramade ciclo de vida:

Diagrama del Ciclo de vida

La imagen de abajo es un diagrama para el ciclo de vida de una instancia. No es necesario que entienda como funciona todo en este momento, pero a medida que aprenda y construya más, será una referencia útil.

Me gusta que los mismo creadores de Vue saben que hay cosas que uno tarda en entender, pero le dan a uno el animo de seguir aprendiendo…

Buena esa Evan You 😎

👌

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