¿Por qué Composition API?
Limitaciones de Options API, problema de reutilización de lógica y ventajas de Composition API.
¿Por qué Composition API? es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Las dos formas de escribir en Vue
Vue 3 le ofrece dos estilos para escribir la lógica de los componentes: Options API y Composition API. Ambos producen el mismo resultado final, pero organizan el código de formas muy distintas.
Comprender sus diferencias le ayuda a elegir la herramienta adecuada y a leer bases de código existentes con confianza.
Cómo organiza el código Options API
Options API divide un componente en secciones fijas: data, computed, methods, watch y hooks del ciclo de vida. Cada parte de una funcionalidad vive en una sección diferente.
Para una funcionalidad pequeña, es posible que tenga que modificar cuatro bloques distintos del archivo.
export default {
data() {
return { count: 0 }
},
computed: {
doubled() { return this.count * 2 }
},
methods: {
increment() { this.count++ }
}
}El problema: las responsabilidades se dispersan
A medida que un componente crece, la lógica de una sola responsabilidad (por ejemplo, un cuadro de búsqueda) se distribuye entre data, methods, computed y watch. Tiene que desplazarse constantemente hacia arriba y hacia abajo para seguir una sola funcionalidad.
Esto se denomina problema de fragmentación.
Composition API: agrupar por funcionalidad
Composition API le permite colocar junto todo el código relacionado con una misma responsabilidad lógica. El estado reactivo, los valores derivados y las funciones que los modifican quedan uno al lado del otro.
Puede leer de arriba abajo y ver una funcionalidad completa en un solo lugar.
import { ref, computed } from 'vue'
export default {
setup() {
const count = ref(0)
const doubled = computed(() => count.value * 2)
function increment() { count.value++ }
return { count, doubled, increment }
}
}Comparación directa
Observe cómo el segundo ejemplo mantiene juntos count, su valor derivado doubled y increment. En Options API, estas tres partes estaban en tres secciones distintas.
- Options API: organizada por tipo de opción
- Composition API: organizada por responsabilidad lógica
Reutilización de lógica: mixins (la forma antigua)
Antes de Composition API, la principal herramienta de reutilización eran los mixins. Un mixin fusiona sus opciones con las de un componente.
Sin embargo, los mixins presentan problemas reales: colisiones de nombres, fuentes poco claras de las propiedades y dependencias implícitas entre mixins.
const counterMixin = {
data() { return { count: 0 } },
methods: { increment() { this.count++ } }
}
export default {
mixins: [counterMixin]
// Where did count come from? Not obvious.
}Reutilización de lógica: composables (la forma moderna)
Un composable es simplemente una función que utiliza API de reactividad y devuelve estado reactivo. Se llama como cualquier otra función, por lo que el origen de cada valor queda explícito.
No hay fusiones mágicas ni colisiones de nombres ocultas.
import { ref } from 'vue'
export function useCounter() {
const count = ref(0)
function increment() { count.value++ }
return { count, increment }
}Uso de un composable
Importar y llamar al composable deja claro que count e increment provienen de useCounter. Incluso puede cambiarles el nombre al desestructurarlos para evitar colisiones.
import { useCounter } from './useCounter'
export default {
setup() {
const { count, increment } = useCounter()
return { count, increment }
}
}Por qué los composables son mejores que los mixins
- Orígenes explícitos — cada valor proviene de una llamada a una función visible.
- Sin colisiones de nombres — puede desestructurar y cambiar nombres libremente.
- Componibles — un composable puede llamar a otro.
- Buen soporte de tipos — TypeScript infiere automáticamente los tipos devueltos.
Mejores herramientas y compatibilidad con TypeScript
Como Composition API se basa en funciones y variables normales, TypeScript puede inferir los tipos sin herramientas especiales. No hay ningún this cuyo tipo escrito manualmente deba mantener, y los editores ofrecen un autocompletado preciso.
Cuándo usar cada una
Composition API resulta especialmente útil para componentes medianos y grandes, así como para cualquier lógica que desee reutilizar. Options API sigue siendo perfectamente válida y puede resultar clara en componentes pequeños.
El código nuevo de Vue 3 suele favorecer Composition API, especialmente con <script setup>, que conocerá pronto.
Comprobación rápida
Compruebe lo que ha aprendido sobre el motivo por el que existe Composition API.
Repaso
En esta lección ha aprendido lo siguiente:
- Options API organiza el código por tipo de opción, lo que dispersa una funcionalidad entre varias secciones.
- Composition API agrupa el código por responsabilidad lógica.
- Los mixins reutilizan la lógica, pero provocan colisiones de nombres y ocultan el origen de los valores.
- Los composables son funciones normales que devuelven estado reactivo: son explícitos, no generan colisiones y se pueden combinar.
Preguntas frecuentes
¿La lección «¿Por qué Composition API?» es gratis?
Sí — el texto completo de «¿Por qué Composition API?» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «¿Por qué Composition API?»?
Limitaciones de Options API, problema de reutilización de lógica y ventajas de Composition API. Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «¿Por qué Composition API?»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- ¿Por qué Composition API?
- Función setup() y variables reactivas
- ref frente a reactive: cuándo usar cada uno
- Computed y watch en Composition API