Hooks del ciclo de vida en Vue.js

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:007:01

Hooks del ciclo de vida en Vue.js

Curso de Vue.js: Componentes y Composition API

Clase 9 de 23

Clase 9 / 23

Recursos

El ciclo de vida en Vue.js define cómo un componente nace, se actualiza y desaparece dentro del virtual DOM. Entenderlo te permite ejecutar código en momentos exactos, optimizar tu app y manejar datos con precisión. Si trabajas con Vue.js, dominar estos hooks cambia la forma en que estructuras tus componentes.

Cada componente en Vue.js es una instancia que cambia constantemente. Piensa en una red social: abres pestañas, llegan mensajes nuevos, eliminas posts. Todos esos elementos aparecen y se destruyen en pantalla, y cada uno tiene un recorrido propio dentro del framework.

¿Qué es el ciclo de vida de un componente en Vue.js?

Es el recorrido que hace cada componente desde que se crea hasta que se elimina de la memoria. Vue.js te da funciones específicas, llamadas hooks, para intervenir en cada fase de ese recorrido [1:30].

¿Qué son los hooks de ciclo de vida en Vue.js? Son funciones opcionales que ejecutan código en momentos específicos: antes de crear el componente, después de montarlo, antes de actualizarlo o cuando se destruye. Las defines dentro de las options de tu componente.

¿Cómo inicia un componente con createApp y mount?

Cuando ejecutas createApp y mount, Vue.js crea una instancia raíz que inicializa todos los eventos y los hooks del ciclo de vida [2:10]. Es el punto cero: aquí arranca todo lo demás.

A partir de ahí, el componente entra en una secuencia ordenada que puedes intervenir con código propio.

¿Cuáles son las fases de creación y montaje?

La primera mitad del ciclo se enfoca en preparar el componente y colocarlo en el DOM. Cada paso tiene un hook asociado que puedes aprovechar.

¿Qué hace beforeCreate y created?

El hook beforeCreate se ejecuta antes de que el componente comience a crearse. Es opcional, pero útil si necesitas correr código antes de cualquier inicialización [2:35].

Después, el componente pasa a un estado inicializado donde ya puede leer datos desde provideInject y usar la reactividad de Vue.js. En ese momento se dispara created, ideal para empezar a descargar datos o sincronizarte con otro componente [3:05]. Eso sí, todavía no existe un elemento en el DOM, solo la definición del componente.

¿Qué hace beforeMount y mounted?

Vue.js renderiza el template aprovechando las variables reactivas. Justo antes de colocar ese resultado en el DOM, ejecuta beforeMount [3:50].

Luego crea el elemento real, lo asigna al componente y te da acceso mediante la variable $el, que contiene el HTML por si quieres manipularlo directamente. Una vez montado, se dispara mounted, perfecto para traer datos o acceder a atributos con Vanilla JS [4:30].

¿Cómo funcionan las actualizaciones y la destrucción?

Después del montaje, el componente entra en un ciclo de espera donde reacciona a cambios de datos y eventos del usuario. Aquí entran en juego los hooks de actualización y desmontaje.

¿Qué hacen beforeUpdate y updated?

Cada vez que cambia un dato reactivo, Vue.js ejecuta beforeUpdate antes de modificar el DOM. En ese momento ya tienes acceso al elemento en pantalla y a todas las variables reactivas [5:15].

Luego actualiza el DOM, renderiza los cambios y dispara updated, donde puedes correr cualquier código posterior a la actualización visual.

¿Cuándo usar mounted en vez de created? Usa created para tareas que no dependen del DOM, como pedir datos iniciales. Usa mounted cuando necesitas el elemento ya renderizado en pantalla, por ejemplo para medir su tamaño o aplicar librerías externas.

¿Qué hacen beforeUnmount y unmounted?

Cuando un componente debe desaparecer, ya sea porque lo eliminaste de una lista o porque llamaste a unmount desde JavaScript, Vue.js ejecuta beforeUnmount. Aquí limpias variables, cierras conexiones al servidor o eliminas referencias externas [6:20].

Después, el componente entra en estado desmontado y deja de existir en memoria. Como último paso se dispara unmounted, útil para notificar a otros componentes que este ya desapareció [6:50].

¿Por qué importan los hooks para estructurar tu app?

Los hooks de ciclo de vida te dan control fino sobre cuándo ocurre cada cosa. Saber dónde colocar cada pieza de código evita bugs, mejora el rendimiento y hace que tus componentes sean predecibles.

Estos son los hooks que puedes definir dentro de las options de un componente Vue.js:

beforeCreate: antes de crear la instancia.
created: instancia lista, sin DOM aún.
beforeMount: antes de insertar en el DOM.
mounted: ya está en pantalla.
beforeUpdate: antes de aplicar cambios reactivos.
updated: cambios ya reflejados en el DOM.
beforeUnmount: antes de destruir el componente.
unmounted: componente eliminado de memoria.

Desde el componente raíz hasta el último hijo, todos comparten este mismo flujo. Tenerlo claro te permite decidir con criterio dónde pedir datos, dónde limpiar recursos y dónde reaccionar a cambios.

¿Ya identificaste en cuál hook meterías la llamada a tu API? Cuéntame en los comentarios cómo lo estás resolviendo en tu proyecto.

Kenneth Angulo L

Hace 3 días

En la practica, los hooks se usan tipicamente asi:

beforeCreate Momento demasiado temprano para la mayoría de tareas.

created Ideal para preparar/cargar datos que no necesitan DOM.

beforeMount Tiene pocos usos cotidianos.

mounted Es el hook importante cuando necesitas el DOM real. Casos típicos:

$refs
addEventListener
mapas
gráficos
librerías externas
setInterval
APIs del navegador que requieren DOM

beforeUpdate Puede servir, por ejemplo, para obtener información del DOM antes de que cambie.

No suele ser necesario para la lógica normal de una aplicación.

updated Por ejemplo, si una librería externa necesita saber que una lista ya terminó de renderizarse.

Hay que tener cuidado: modificar datos reactivos dentro de updated puede provocar ciclos de actualización.

beforeUnmount Es el hook típico para limpieza. Muy importante para evitar:

timers ejecutándose después de eliminar el componente
event listeners acumulados
suscripciones activas
conexiones WebSocket
recursos de librerías externas

unmounted El componente ya fue desmontado. Se utiliza menos que beforeUnmount, porque normalmente quieres limpiar antes de que desaparezca, no después.

Comentarios (10)10 comentarios

Dufainder Bedoya

Hace 4 años

Juan Guillermo Perez Cardozo

Josue Cerron Tuesta

Ana Shek

Miguel Angel Reyes Moreno

Joaquin Ignacio Pinto Reynolds

Hace 10 meses•editado

José Reinaldo Duque Serna

Hace 5 años

Sam Leonetti

Diana Martinez

Jose Alejandro Pantoja Giraldo

José Gersain Osorio Morales

Hace 2 años

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.js

Progreso del curso

Introducción

Built-in Components

Componentes personalizados

Composition API

Cierre del curso

Recursos

Recursos