Hooks del ciclo de vida en Vue 3 setup

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:005:18

Hooks del ciclo de vida en Vue 3 setup

Curso de Vue.js: Componentes y Composition API

Clase 13 de 23

Clase 13 / 23

Recursos

La función setup en Vue 3 cambia la forma en que escuchas los hooks del ciclo de vida: ya no los declaras como propiedades de un objeto, sino que los importas como funciones desde Vue.js. Esto te permite organizar la lógica de cada componente de manera funcional y más legible, ideal si vienes de la Options API y quieres dar el salto a la Composition API.

¿Qué cambia en los hooks al usar la Composition API?

En la Options API escribías los hooks como claves dentro del objeto que retorna el componente: created, beforeCreate, mounted, updated y compañía vivían como funciones dentro de ese JSON de configuración. Con setup, ese estilo declarativo desaparece y todo se vuelve funcional.

La idea central es simple: el ciclo de vida sigue existiendo y se comporta igual, pero ahora importas cada hook desde Vue.js y lo invocas dentro de la función setup. Así, tu componente queda más modular y puedes agrupar la lógica relacionada en bloques claros.

¿Qué es la función setup en Vue 3? Es el punto de entrada de la Composition API donde declaras estado, lógica y hooks del ciclo de vida de forma funcional, sustituyendo parte de la configuración tipo objeto.

¿Cómo se importan y usan los hooks dentro de setup?

La sintaxe sigue un patrón muy claro: antepones on al nombre del hook y escribes la primera letra en mayúscula. Así, mounted se convierte en onMounted, updated en onUpdated, beforeMount en onBeforeMount, y lo mismo aplica para los hooks de destrucción y actualización.

Un ejemplo mínimo con un componente home.vue importado dentro de app.vue se vería así [01:55]:

js import { onMounted } from 'vue'

export default { setup() { onMounted(() => { console.log('mounted') }) } }

Al guardar y abrir el navegador, verás el console.log ejecutándose justo cuando el componente se monta en el DOM. La misma lógica aplica para el resto de hooks: los importas, los llamas dentro de setup y les pasas la función que quieres ejecutar en ese momento.

¿Qué hooks puedes usar y cuáles no?

Casi todos los hooks tradicionales tienen su versión con prefijo on y están disponibles dentro de setup. Los más comunes son:

onMounted, para cuando el componente ya existe en el DOM.
onUpdated, para cuando cambia y se vuelve a renderizar.
onBeforeMount, justo antes de montarse.
onUnmounted, cuando el componente se destruye y necesitas limpiar memoria.

Las dos excepciones importantes son beforeCreate y created. Estos dos hooks no existen en la Composition API porque setup los reemplaza por completo: la propia función setup se ejecuta en ese momento del ciclo de vida, así que cualquier código que hubieras puesto en created va directamente dentro de setup.

¿Por qué setup reemplaza a beforeCreate y created? Porque setup corre en ese mismo punto del ciclo de vida, antes de que el DOM esté disponible pero ya con la reactividad inicializándose. Duplicar esos hooks no tendría sentido.

¿Para qué te sirven los hooks del ciclo de vida en un componente?

Los hooks son tu mejor herramienta para obtener datos, limpiarlos y gestionar la memoria mientras los componentes se montan y desmontan. Cada vez que navegas en una app Vue, los componentes entran y salen del DOM constantemente, y aprovechar estos momentos clave evita fugas de memoria y peticiones innecesarias.

Algunos usos típicos:

Pedir datos a una API en onMounted cuando el componente ya está en pantalla.
Cancelar suscripciones o listeners en onUnmounted para liberar recursos.
Reaccionar a cambios de props o estado con onUpdated cuando necesitas sincronizar algo con el DOM.

Un detalle clave: dentro de setup todo es funcional. No vas a tener acceso a this como en la Options API, así que toda la lógica que antes vivía en methods, computed o data ahora se expresa con funciones, refs y reactive.

Para que esta forma de trabajar tenga sentido completo, te falta una pieza fundamental: las variables reactivas. Sin reactividad, los hooks por sí solos no aprovechan todo el poder de la Composition API. ¿Ya usaste onMounted en algún proyecto? Cuéntame en los comentarios qué hook te resulta más útil en tu día a día con Vue.

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 3 setup

Progreso del curso

Introducción

Built-in Components

Componentes personalizados

Composition API

Cierre del curso

Recursos

Recursos