Hasta la versión de Vue 2, trabajábamos principalmente con la Options API (propiedades como data, methods, computed, watch). Esta organización para organizar los componentes sigue funcionando, pero en muchos casos, separar la lógica por “funcionalidad” en lugar de por “tipo” nos permite construir componentes más coherentes y reutilizables.

La Composition API es un conjunto de APIs que podemos usar dentro de la función setup() de un componente. Esta función se ejecuta antes de la creación del componente, y dentro de ella definimos la lógica reactiva, los métodos, y todo lo que el componente necesita para funcionar.

Un ejemplo básico:

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">Contador: {{ count }}</button>
</template>

Aquí, ref crea una variable reactiva. count.value representa su valor actual. Toda la lógica se concentra en un solo lugar, lo que hace que la relación entre los datos y sus manipulaciones sea inmediata.

¿Por qué usar Composition API?

En proyectos pequeños, no hay una diferencia notable. Sin embargo, en proyectos medianos o grandes, la Composition API permite:

• Agrupar la lógica relacionada sin importar si es un dato, un método o un efecto.
• Reutilizar fácilmente fragmentos de lógica entre componentes mediante funciones reutilizables (composables).
• Tener más control en la tipificación cuando usamos TypeScript.

Supongamos que tenemos un componente que maneja lógica de autenticación y validación de formulario. Con Options API, estos elementos se separan en secciones. Con Composition API, podemos agruparlos y “componerlos” de forma más natural:

<script setup>
import { ref } from 'vue'

const email = ref('')
const password = ref('')

function login() {
  if (!email.value || !password.value) {
    alert('Por favor, completa todos los campos.')
    return
  }
  // Lógica de autenticación
}
</script>

<template>
  <form @submit.prevent="login">
    <input v-model="email" type="email" placeholder="Correo" />
    <input v-model="password" type="password" placeholder="Contraseña" />
    <button type="submit">Iniciar sesión</button>
  </form>
</template>

Principales APIs que usamos

Los principales métodos de la Composition api son:

• ref() para datos primitivos reactivos.
• reactive() para objetos completos.
• computed() para valores derivados.
• watch() para ejecutar efectos secundarios cuando cambian los datos.

Un ejemplo práctico usando computed:

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('Juan')
const lastName = ref('Pérez')

const fullName = computed(() => `${firstName.value} ${lastName.value}`)
</script>

<template>
  <p>Nombre completo: {{ fullName }}</p>
</template>

fullName se actualiza automáticamente cuando cambian firstName o lastName, sin necesidad de escribir lógica extra.

Cómo estructurar mejor nuestros componentes

Cuando usamos Composition API, es importante mantener algunas buenas prácticas:

• Organizar la lógica en bloques dentro de setup(), separados por intención (por ejemplo, datos del formulario, lógica de autenticación, control de interfaz).
• Crear y reusar funciones externas cuando varios componentes compartan la misma funcionalidad.
• Nombrar las referencias (ref, computed) de forma explícita para que sea fácil entender su propósito.

Por ejemplo, si usamos lógica de temporizador en varios lugares, podemos crear un composable así:

import { ref, onMounted, onUnmounted } from 'vue'

export function useTimer() {
  const seconds = ref(0)
  let timer = null

  onMounted(() => {
    timer = setInterval(() => {
      seconds.value++
    }, 1000)
  })

  onUnmounted(() => {
    clearInterval(timer)
  })

  return { seconds }
}

Y luego usarlo en cualquier componente:

<script setup>
import { useTimer } from './useTimer'

const { seconds } = useTimer()
</script>

<template>
  <p>Tiempo transcurrido: {{ seconds }} segundos</p>
</template>

Así mantenemos nuestros componentes ligeros y nuestras funciones reutilizables. Además las no estar acopladas son fáciles de testear.

Conclusión

La Composition API de Vue no reemplaza a la Options API; ambas siguen disponibles. Sin embargo, cuando buscamos una manera más flexible de estructurar componentes y queremos facilitar la reutilización de lógica, la Composition API nos proporciona una mayor flexibilidad.

Dado que la Options API sigue siendo compatible, no es necesario migrar todos los comoponentes de golpe en las nuevas versiones de Vue. Podemos empezar utilizando Composition API en componentes nuevos o cuando notemos que la estructura actual se vuelve difícil de mantener. Paso a paso, iremos encontrando el equilibrio que mejor se adapte a nuestro proyecto.