Vue 3 Composition API: Patrones Modernos para Aplicaciones Escalables

Vue 3 trajo consigo la Composition API, un modelo de reactividad más flexible que permite organizar la lógica por funcionalidad en lugar de por opciones del ciclo de vida.

¿Por qué Composition API?

Con Options API, la lógica relacionada se fragmenta entre data, methods, computed y watch. Con Composition API, agrupas toda la lógica de una feature en una sola función:

<script setup lang="ts">
import { ref, computed, watch } from 'vue'

const search = ref('')
const results = ref<string[]>([])
const isLoading = ref(false)

const hasQuery = computed(() => search.value.length > 2)

watch(search, async (val) => {
  if (!hasQuery.value) return
  isLoading.value = true
  results.value = await fetchResults(val)
  isLoading.value = false
})
</script>

Componibles: el corazón de la reutilización

Los composables son funciones que encapsulan estado reactivo y lógica:

// useDebounce.ts
export function useDebounce<T>(value: Ref<T>, delay = 300) {
  const debounced = ref(value.value) as Ref<T>
  let timer: ReturnType<typeof setTimeout>

  watch(value, (val) => {
    clearTimeout(timer)
    timer = setTimeout(() => { debounced.value = val }, delay)
  })

  return { debounced }
}

Reactividad con shallowRef

Para listas grandes, shallowRef evita el overhead de reactividad profunda:

import { shallowRef } from 'vue'

const products = shallowRef<Product[]>([])

async function loadProducts() {
  const data = await api.getProducts()
  products.value = data // solo el trigger cuenta, no cada propiedad
}

Provide / Inject tipado

// injection-keys.ts
import type { InjectionKey, Ref } from 'vue'
export const AuthKey: InjectionKey<Ref<User | null>> = Symbol('auth')

Conclusión

La Composition API no solo mejora la organización del código, sino que habilita patrones de reutilización que eran imposibles con Options API. Para proyectos empresariales con Vue 3, es el estándar recomendado.