Composables: funciones de composición reutilizables
Extraiga la lógica reactiva a funciones composable con el prefijo use, compártalas entre componentes y comprenda en qué se diferencian de los mixins.
Composables: funciones de composición reutilizables es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 4 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 Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué son los composables?
Un composable es una función que usa hooks de la Composition API para encapsular y reutilizar lógica con estado. Son el equivalente de los mixins en la Composition API, pero sin colisiones de nombres ni dependencias ocultas.
Un composable básico
Extraiga la lógica reactiva en una función cuyo nombre comience por use. Puede usar ref, computed, watch y hooks del ciclo de vida, igual que setup().
// useCounter.ts
import { ref } from 'vue';
export function useCounter(initial = 0) {
const count = ref(initial);
const increment = () => count.value++;
const decrement = () => count.value--;
const reset = () => (count.value = initial);
return { count, increment, decrement, reset };
}
// Usage in any component:
const { count, increment } = useCounter(10);Composable con hooks del ciclo de vida
Los composables pueden registrar hooks del ciclo de vida. Los hooks se ejecutan en relación con el componente que llama al composable.
// useOnlineStatus.ts
import { ref, onMounted, onUnmounted } from 'vue';
export function useOnlineStatus() {
const isOnline = ref(navigator.onLine);
const update = () => (isOnline.value = navigator.onLine);
onMounted(() => {
window.addEventListener('online', update);
window.addEventListener('offline', update);
});
onUnmounted(() => {
window.removeEventListener('online', update);
window.removeEventListener('offline', update);
});
return { isOnline };
}Composable con async (useFetch)
Los composables funcionan muy bien para obtener datos de forma asíncrona: encapsulan el patrón de carga/error/datos.
// useFetch.ts
export function useFetch<T>(url: MaybeRef<string>) {
const data = ref<T | null>(null);
const loading = ref(true);
const error = ref<string | null>(null);
watchEffect(async (onCleanup) => {
const controller = new AbortController();
onCleanup(() => controller.abort());
loading.value = true;
error.value = null;
try {
const res = await fetch(unref(url), { signal: controller.signal });
data.value = await res.json();
} catch (e: any) {
if (e.name !== 'AbortError') error.value = e.message;
} finally { loading.value = false; }
});
return { data, loading, error };
}Aceptar refs como parámetros
Los composables pueden aceptar valores simples o refs como argumentos mediante MaybeRef<T> (= T | Ref<T>) y unref() para acceder al valor.
import type { MaybeRef } from 'vue';
import { unref } from 'vue';
function useDouble(num: MaybeRef<number>) {
return computed(() => unref(num) * 2);
}Composables frente a mixins
Los mixins inyectan propiedades en el componente sin un origen claro. Los composables son explícitos: puede ver exactamente qué proporciona un composable a partir de su valor de retorno. Puede usar varios composables sin conflictos de nombres.
Compartir el estado entre componentes
Si un composable llama a ref() en su interior, cada componente que lo use obtiene su propio estado. Para compartir el estado entre componentes, llame a ref() en el ámbito del módulo (fuera de la función composable).
// Shared state (module-level):
const sharedCount = ref(0);
export function useSharedCounter() {
// All callers share the same sharedCount
return { count: sharedCount, increment: () => sharedCount.value++ };
}Bibliotecas de composables
VueUse (vueuse.org) proporciona más de 200 composables listos para usar: useLocalStorage, useFetch, useDark, useIntersectionObserver y muchos más. Consulte siempre VueUse antes de escribir una solución desde cero.
Probar composables
Pruebe los composables llamándolos dentro de un componente de prueba pequeño o usando el patrón mountedApp de @vue/test-utils. Vitest se integra muy bien con el sistema de reactividad de Vue.
Convenciones para nombrar composables
Use siempre el prefijo use (useAuth, useFetch, useMediaQuery). Manténgalos centrados en una sola responsabilidad. Evite composables que hagan demasiadas tareas sin relación.
Organización de composables
Cree una carpeta composables/. Use un archivo por composable. El archivo de índice vuelve a exportar todos los composables. Esto refleja la forma en que se organizan los custom hooks en los proyectos de React.
Comprobación rápida
¿Cuál es la principal ventaja de los composables frente a los mixins de Vue?
Resumen: composables de Vue
Un composable es una función con el prefijo use que llama a hooks de la Composition API. Cada componente que lo usa obtiene un estado independiente, a menos que se utilicen refs a nivel de módulo. Acepte refs o valores con MaybeRef + unref. Registre hooks del ciclo de vida dentro de los composables. Consulte VueUse antes de escribir uno propio. Los valores de retorno explícitos evitan la contaminación del espacio de nombres propia de los mixins.
Preguntas frecuentes
¿La lección «Composables: funciones de composición reutilizables» es gratis?
Sí — el texto completo de «Composables: funciones de composición reutilizables» 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 Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Composables: funciones de composición reutilizables»?
Extraiga la lógica reactiva a funciones composable con el prefijo use, compártalas entre componentes y comprenda en qué se diferencian de los mixins. Practicas Frontend 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 Frontend Academy?
No se requiere experiencia previa. Frontend 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 4 de 4.
¿Cuánto tiempo toma la lección «Composables: funciones de composición reutilizables»?
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 Frontend Academy?
Sí. Cada lección de Frontend 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
- ref() y reactive()
- computed() y watch()
- La función setup() y script setup
- Composables: funciones de composición reutilizables