Composable to funkcja wielokrotnego użytku, która enkapsuluje logikę stanową za pomocą Composition API. Zgodnie z konwencją ma nazwę useXxx i zwraca reaktywny stan oraz funkcje — pozwalając dzielić logikę między komponentami bez mixins czy powtórzeń.
{ 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>
Każdy komponent, który wywołuje useCounter(), otrzymuje swój własny izolowany count — composables tworzą świeży stan przy każdym wywołaniu, w przeciwieństwie do wspólnej zmiennej na poziomie modułu.
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 };
}
Composables mogą używać hooków cyklu życia, watchers i innych composables — a co ważne, enkapsulują własne czyszczenie (onUnmounted), więc konsumenci nie muszą o tym pamiętać.
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
Composables to właściwy idiomatyczny sposób na ekstrakcję i ponowne użycie logiki stanowej w Vue 3 — pobieranie danych, obsługę formularzy, śledzenie myszy/przewijania, debouncing itd.
Rozwiązują problem ponownego użytku logiki w czysty sposób (jawnie, bez kolizji, komponowalnie, przyjaznie dla TypeScript), gdzie Vue 2 mixins zawodził.
Są głównym powodem, dla którego zespoły adopcją Composition API: dzielona logika staje się prostą, testowalną funkcją zamiast rozproszonego czy zduplikowanego kodu.