Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Explorando los primeros hooks del ciclo de vida de Vue

10/23
Recursos

Aportes 3

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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.