Composition API: setup en Vue 3

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:008:13

Composition API: setup en Vue 3

Curso de Vue.js: Componentes y Composition API

Clase 12 de 23

Clase 12 / 23

Recursos

La Composition API llega con Vue.js 3 como una alternativa a la Options API para escribir componentes con programación funcional, sin perder la reactividad. Si trabajas con componentes extensos y buscas un código más organizado, esta API te permite agrupar la lógica por conceptos en lugar de por estructura impuesta por el framework.

¿Qué problema resuelve la Composition API en Vue.js 3?

Cuando un componente crece, la Options API basada en un JSON de configuración empieza a sentirse desordenada. Imagina un componente UserRepositories que recibe un nombre de usuario y devuelve sus repositorios desde algo similar a GitHub.

Ese componente termina manejando varias responsabilidades a la vez:

Una lista de repositorios traída desde el backend.
Filtros para ordenar por estrellas, título alfabético o fecha.
Una search query para buscar por texto.
Funciones computed que devuelven repositorios filtrados.
Métodos para consultar la base de datos y aplicar ordenamientos.

En la Options API, todas esas variables viven dentro de data, los cálculos en computed y las acciones en methods. El resultado: haces scroll sin parar entre la línea 100 y la 200 buscando cómo se llama un atributo de filtros mientras editas una función computed.

¿Qué es la Composition API? Es una forma de escribir componentes en Vue.js 3 usando funciones dentro de un setup, donde agrupas la lógica por concepto (filtros, búsqueda, datos del usuario) en lugar de separarla por tipo (data, computed, methods).

¿Cómo funciona la función setup en Vue.js?

Todo en la Composition API gira alrededor de una función llamada setup. Es el punto de entrada desde donde sale toda la nueva API.

La función setup se comporta como un hook del ciclo de vida, parecido a created o mounted, pero con una diferencia clave: se ejecuta antes que todos los demás. Por eso puede actuar como reemplazo de buena parte de lo que antes escribías en data o computed.

¿Qué argumentos recibe setup y qué devuelve?

La función setup recibe dos argumentos principales:

props: las propiedades que el componente recibe desde fuera.
context: un objeto con accesos al resto del componente, como atributos recibidos al invocarlo o el emit para emitir eventos.

Lo que devuelvas desde setup queda expuesto al resto del componente y al template. Si declaras una lista de repositorios o un método para filtrarlos y los retornas, el modelo podrá usarlos directamente.

¿Cuándo conviene usar la Composition API en vez de la Options API? Úsala cuando el componente sea extenso o mezcle varias responsabilidades. Para componentes pequeños, la Options API sigue siendo válida y no desaparece en Vue 3.

¿Por qué Vue 3 mantiene la Options API junto con la nueva propuesta?

La Composition API no elimina la API anterior. La Options API sigue funcionando perfectamente en Vue 3 y para componentes pequeños suele ser más directa. La diferencia está en el control que ganas al organizar tu código.

Con la Options API tu estructura principal está fija: props, data, computed, methods. No puedes agrupar las variables de filtros con sus computed y métodos relacionados.

Con la Composition API sí. Puedes escribir, dentro de setup, primero todo lo relacionado con la búsqueda, después todo lo de filtros, y luego los datos generales del usuario. La separación de conceptos la decides tú.

Algunos puntos clave para tener presentes:

La Composition API nace en Vue.js 3 como alternativa funcional y reactiva.
La función setup se ejecuta antes que cualquier otro hook del ciclo de vida.
Lo que retornas en setup queda accesible tanto en el componente como en el template.
Los argumentos props y context te conectan con el exterior del componente.

En componentes más desarrollados con Composition API, verás que casi todo vive dentro de setup y la estructura tradicional de data, computed y methods casi desaparece. ¿Has tenido que hacer scroll infinito en un componente Vue para encontrar una variable? Cuéntame en los comentarios cómo organizas tu código hoy.

Comentarios (6)6 comentarios

Ameth Ordoñez Erazo

Hace 4 años

Options API o Composition API ¿Cuál elegir?

Ambos estilos de API son totalmente capaces de cubrir casos de uso comunes. Son interfaces diferentes impulsadas por el mismo sistema. De hecho, ¡la API de opciones se implementa sobre la API de composición! Los conceptos y conocimientos fundamentales sobre Vue se comparten entre los dos estilos.

La API de opciones se centra en el concepto de una "instancia de componente", que generalmente se alinea mejor con un modelo mental basado en clases para usuarios que provienen de entornos lingüísticos de programación orientada a objetos. También es más amigable para principiantes al abstraer los detalles de reactividad y hacer cumplir la organización del código a través de grupos de opciones.

La API de composición se centra en declarar variables de estado reactivas directamente en el ámbito de una función y componer el estado de varias funciones juntas para manejar la complejidad. Tiene una forma más libre y requiere una comprensión de cómo funciona la reactividad en Vue para ser utilizado de manera efectiva. A cambio, su flexibilidad permite patrones más poderosos para organizar y reutilizar la lógica.

Puede obtener más información sobre la comparación entre los dos estilos y los posibles beneficios de la API de composición en las Preguntas frecuentes sobre la API de composición.

Si es nuevo en Vue, esta es nuestra recomendación general:

Para propósitos de aprendizaje, elige el estilo que te parezca más fácil de entender. Una vez más, la mayoría de los conceptos básicos se comparten entre los dos estilos. Siempre puedes elegir el otro estilo más tarde.

Para uso en producción:

Vaya con la API de opciones si no está utilizando herramientas de compilación o planea usar Vue principalmente en escenarios de baja complejidad, p. mejora progresiva.

Elija Composición API + Componentes de un solo archivo si planea crear aplicaciones completas con Vue.

No tienes que comprometerte con un solo estilo durante la fase de aprendizaje. La documentación de Vue proporcionará ejemplos de código en ambos estilos cuando corresponda, y puede alternar entre ellos en cualquier momento utilizando los interruptores de preferencia de API en la parte superior de la barra lateral izquierda en la página de la documentación oficial de Vue.js

Juan Guillermo Perez Cardozo

gracias por la completa explicacion desde tu experiencia

Josue Cerron Tuesta

Gracias!

Cristian Tangarife Gálvez

Hace 5 años

Si generan el proyecto con "npm init vue@latest" que es como lo sugiere la documentación de vue, vean la clase de "Script Setup" primero, eso los saca de las dudas de por qué "<script setup>"

Miguel Angel Reyes Moreno

composition api, a mi parecer, se ve mejor que el options api :ey

Jose Luis Barboza Gonzales

una vez que entiendes composition api, no hay vuelta atras xd

Jose Alejandro Pantoja Giraldo

chucha esta clase no termina de ser clara realmente, pero supongo q en las proximas ya entendere mejor como se encapsula el codigo

Yeferson Nilsen Luengas Vargas

La verdad en esta clase no me queda claro que es setup, depronto alguna lectura recomendada?

Diana Martinez

Setup es una función especial dentro de Vue, que nos permitirá comenzar a crear código en Composition API, en las próximas clases vamos a comenzar a usarla más, y entenderás porqué existe.

Barbara Torres

Hace 3 años

setup() →se comporta como un hook de ciclo de vida, como created, mounted, etc. Pero con la caracteristica de que se va a ejecutar antes de q todos ellos, la función setup() viene siendo como una especie de reemplazo de data(), computed(), vamos a escribir el código dentro de la función setup()

La función setup() recibe dos argumentos →

props del componente
contexto del componente → tiene algunos atributos, es para poder acceder a otras partes del componente, por ej a los atributos q se reciben cuando se invoca al componente, emit, etc
Lo q va a retornar la función es cualquier cosa que querramos exponer hacia el resto del componente, por ej, si tengo una variable q sea la lista de repositorios, podria devolverla en setup()

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

Composition API: setup en Vue 3

Progreso del curso

Introducción

Built-in Components

Componentes personalizados

Composition API

Cierre del curso

Recursos

Recursos