Hooks del ciclo de vida en Vue con ejemplos

Curso de Vue.js: Componentes y Composition API

Contenido del curso

Introducción

Built-in Components

Componentes personalizados

Composition API

Cierre del curso

23
Qué aprendiste en el curso de Vue.js 3
01:29 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:004:56

Hooks del ciclo de vida en Vue con ejemplos

Curso de Vue.js: Componentes y Composition API

Clase 10 de 23

Clase 10 / 23

Recursos

Los hooks del ciclo de vida en Vue.js te permiten ejecutar código en momentos específicos de la existencia de un componente: antes de crearse, al crearse, al montarse en el DOM y al destruirse. Saber cuándo dispararlos evita errores comunes al intentar acceder a datos o elementos que aún no existen.

Este recorrido práctico te muestra qué ocurre con data y con el elemento HTML en cada fase, usando un componente mínimo en App.vue que solo declara una variable text con el valor Hola, Vue.

¿Cómo se declaran los hooks dentro de un componente Vue?

Dentro del objeto del componente, los hooks se agregan como funciones al mismo nivel que data. No necesitas importar nada extra: basta con escribir el nombre del hook y darle un cuerpo.

En el ejemplo se añaden tres funciones para observar el comportamiento paso a paso:

beforeCreate: se ejecuta antes de inicializar la reactividad.
created: corre cuando la instancia ya existe, pero el componente todavía no se monta.
mounted: dispara cuando el componente ya está en el DOM.

Dentro de cada función se imprime con console.log el nombre del hook, junto con this.$data para inspeccionar el objeto de datos y this.$el para revisar el elemento HTML asociado.

¿Qué es un hook del ciclo de vida en Vue? Es una función que Vue ejecuta automáticamente en un momento específico de la vida de un componente, como su creación, montaje o destrucción. Te da un punto exacto para correr lógica.

¿Qué pasa con data y el elemento DOM en cada fase?

Al recargar el navegador con el dev server activo, la consola muestra una secuencia clara de tres estados muy distintos. Y aquí viene lo interesante: cada hook tiene acceso a cosas diferentes.

¿Qué ocurre en beforeCreate?

En esta fase el objeto data aparece vacío y el elemento HTML tampoco existe. Vue todavía no ha inicializado el sistema de reactividad, así que la variable text aún no es accesible desde la instancia. Tampoco hay nada montado en el virtual DOM.

Usar beforeCreate para leer datos del componente no funciona, porque simplemente no están listos.

¿Qué ocurre en created?

Cuando se dispara created, la instancia del objeto Vue ya fue construida. Ahora this.$data sí contiene la variable text con el valor Hola, Vue, porque la función que devuelve los datos ya se ejecutó.

Sin embargo, el elemento HTML sigue sin existir. El componente fue creado, pero no montado. Es el momento ideal para preparar datos, no para tocar el DOM.

¿Cuándo puedo acceder a this.$data en Vue? Desde el hook created en adelante. Antes de eso, en beforeCreate, el sistema de reactividad aún no ha inicializado las variables del componente.

¿Qué ocurre en mounted?

En mounted ya tienes ambos: el objeto data con tus variables y el elemento del DOM, que en este caso es un div con el texto Hola, Vue. Aquí ya puedes manipular el HTML con Vanilla JS o cualquier librería que necesite un nodo real para funcionar.

Este es el hook indicado para integraciones con librerías externas, mediciones de tamaño o cualquier acción que dependa de que el componente esté presente en la página.

¿Por qué importa el orden del ciclo de vida?

El comportamiento que observas en App.vue se repite en cada componente del árbol, desde el raíz hasta el último hijo. Si intentas acceder al DOM demasiado pronto, obtienes undefined; si esperas demasiado, puedes perder oportunidades de inicializar valores antes de renderizar.

Algunas reglas prácticas que se desprenden del ejercicio:

Inicializa datos derivados o llamadas iniciales en created.
Manipula el DOM o conecta librerías externas en mounted.
Limpia listeners, timers o conexiones cuando el componente se desmonta.

Los hooks funcionan exactamente igual entre sí en cuanto a sintaxis. Lo único que cambia es el momento en que Vue los llama y, por tanto, a qué información puedes acceder dentro de ellos.

¿Cómo practicar el resto de los hooks del ciclo de vida?

El reto es replicar el mismo experimento con los demás hooks: beforeMount, beforeUpdate, updated, beforeUnmount y unmounted. La idea no es solo imprimir un console.log, sino observar con detalle qué partes del componente siguen disponibles y cuáles ya no.

Algunas preguntas guía mientras experimentas:

¿Puedes leer this.$el justo antes de montar el componente?
¿Qué pasa con los métodos y las propiedades computadas tras unmounted?
¿Sigue siendo accesible el objeto data cuando el componente se destruye?

Probar cada caso te da una intuición real sobre la reactividad de Vue.js y te prepara para depurar errores típicos cuando un componente intenta tocar algo que ya no existe. Comparte tus hallazgos en el sistema de comentarios para revisarlos en conjunto.

Alvaro Moises Gonzalez Quintero

Hace 4 años

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

Hace 4 años

Buena info

Luis Rodriguez

Hace 4 años

gracias excelente referencia

Introducción

Options API vs Composition API en Vue 3

Crear y configurar proyectos con Vue CLI

Estructura de archivos en proyectos Vue CLI

Built-in Components

Componentes dinámicos con Vue.js

Componentes asíncronos con defineAsyncComponent

Transiciones con fade en Vue.js

Teleports en Vue 3 para mover modales al DOM

Componentes personalizados

Virtual DOM en Vue.js explicado

Hooks del ciclo de vida en Vue.js

Hooks del ciclo de vida en Vue con ejemplos

Mixins en Vue.js: reutilización con riesgos

Composition API

Composition API: setup en Vue 3

Hooks del ciclo de vida en Vue 3 setup

`ref` y `reactive` en Vue Composition API

Watchers con Composition API en Vue.js

Propiedades computadas con Composition API

Props reactivos con toRefs en Vue.js

El argumento context en Vue 3 setup

provide e inject en Vue Composition API

Template Refs en Vue 3 con Composition API

Composition API vs Options API en Vue.js

script setup en Vue 3 sin export default

Cierre del curso

Qué aprendiste en el curso de Vue.js 3

Hooks del ciclo de vida en Vue con ejemplos

Progreso del curso

Introducción

Built-in Components

Componentes personalizados

Composition API

Cierre del curso

Recursos

Recursos