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:

1. props: las propiedades que el componente recibe desde fuera.
2. 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.