¿Qué es un Composable?

Características Clave

• Encapsulación de Lógica con Estado:
  A diferencia de funciones puramente utilitarias (que manejan lógica sin estado), un composable puede gestionar datos reactivos que cambian con el tiempo, como por ejemplo el seguimiento de la posición del mouse o el manejo de estados de carga y error al hacer peticiones asíncronas.

• Reutilización y Organización:
  Los composables facilitan la reutilización de lógica entre diferentes componentes. Al extraer funcionalidades en funciones externas (por convención, con nombres que empiezan con "use", como useMouse o useQuery), se mejora la organización del código y se evita el desorden dentro de los componentes.

• Integración con el Ciclo de Vida:
  Dentro de un composable se pueden usar hooks del ciclo de vida (por ejemplo, onMounted y onUnmounted) para iniciar y limpiar efectos secundarios, como la adición o remoción de listeners de eventos. Esto asegura que la lógica se ejecute de forma apropiada en el ciclo de vida del componente que la utiliza.

• Soporte para Argumentos Reactivos:
  Los composables pueden recibir argumentos que sean valores estáticos, refs o getters. Utilizando utilidades como toValue(), se puede normalizar estos argumentos, permitiendo que la función reaccione a cambios en los datos y actualice el estado de manera automática. Esto es útil, por ejemplo, en un composable como useQuery, que vuelve a ejecutar la llamada a la API cuando cambia la URL

• Ventajas sobre Otros Patrones:
  Comparados con mixins, los composables ofrecen mayor claridad al indicar el origen de cada fragmento de lógica, evitan colisiones en el espacio de nombres y eliminan la comunicación implícita entre distintas partes del código. Además, frente a patrones como los componentes renderless, los composables no generan instancias adicionales de componentes, lo que puede ser beneficioso en términos de rendimiento.

// src/composables/useQuery.ts
import { ref, watchEffect, toValue } from 'vue'

const useQuery = (url) => {
  const data = ref(null)
  const error = ref(null)
  const isLoading = ref(false)

  const fetchData = () => {
    // reset state before fetching..
    data.value = null
    error.value = null
    isLoading.value = true

    fetch(toValue(url))
      .then((res) => res.json())
      .then((json) => (data.value = json))
      .catch((err) => (error.value = err))
      .finally(() => (isLoading.value = false))
  }

  watchEffect(() => {
    fetchData()
  })

  return {
   data,
   error,
   isLoading,
 }
}

export default useQuery

Conclusión

En resumen, los composables en Vue.js son funciones reutilizables que aprovechan la Composition API para organizar y compartir lógica reactiva en las aplicaciones. Este enfoque no solo mejora la claridad y la modularidad del código, sino que también evita problemas comunes asociados a técnicas anteriores como los mixins, ofreciendo una solución más escalable y mantenible.