Un composable es una función reutilizable que encapsula lógica con estado usando la Composition API. Por convención se nombra useXxx y devuelve estado reactivo más funciones — permitiéndote compartir lógica entre componentes sin mixins o repetición.
{ ref, computed } ;
() {
count = (initial);
double = ( count. * );
() { count.++; }
() { count. = initial; }
{ count, double, increment, reset };
}
<script setup>
import { useCounter } from "@/composables/useCounter";
const { count, double, increment } = useCounter(10); // each call = independent state
</script>
<template>
<button @click="increment">{{ count }} (double: {{ double }})</button>
</template>
Cada componente que llama a useCounter() obtiene su propio count aislado — los composables crean estado fresco en cada llamada, a diferencia de una variable compartida a nivel de módulo.
import { ref, onUnmounted } from "vue";
export function useMousePosition() {
const x = ref(0), y = ref(0);
const update = (e) => { x.value = e.pageX; y.value = e.pageY; };
window.addEventListener("mousemove", update); // set up
onUnmounted(() => window.removeEventListener("mousemove", update)); // auto cleanup!
return { x, y };
}
Los composables pueden usar lifecycle hooks, watchers y otros composables — y críticamente, encapsulan su propia limpieza (onUnmounted), así que los consumidores no tienen que recordarlo.
Mixins (Vue 2): merged into the component — unclear where properties came from,
naming collisions between mixins, implicit dependencies
Composables: explicit imports + return values — clear sources, no collisions,
can be composed, fully typed in TypeScript
Los composables son la forma idiomática de extraer y reutilizar lógica con estado en Vue 3 — obtención de datos, manejo de formularios, seguimiento de ratón/scroll, debouncing, etc.
Resuelven el problema de reutilización de lógica de forma limpia (explícita, sin conflictos, componible, compatible con TypeScript) donde los mixins de Vue 2 fracasaron.
Son la razón principal por la que los equipos adoptan la Composition API: la lógica compartida se convierte en una función simple y comprobable en lugar de código disperso o duplicado.