Un composable este o funcție reutilizabilă care încapsulează logică cu stare folosind Composition API. După convenție, are numele useXxx și returnează stare reactivă plus funcții — permițând să partajezi logică între componente fără mixins sau repetări.
{ 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>
Fiecare component care apelează useCounter() obține propriul count izolat — composables-urile creează stare proaspătă per apel, spre deosebire de o variabilă partajată la nivel de modul.
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-urile pot folosi lifecycle hooks, watchers și alte composables — și crucial, ele încapsulează propria curățare (onUnmounted), deci consumatorii nu trebuie să-și amintească.
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-urile sunt modalitatea idiomatică de a extrage și reutiliza logica cu stare în Vue 3 — preluarea datelor, gestionarea formularelor, urmărirea mouse-ului/scroll-ului, debouncing, etc.
Ele rezolvă problema reutilizării logicii în mod curat (explicit, fără coliziuni, compozabil, ușor cu TypeScript) acolo unde mixins-urile Vue 2 au eșuat.
Sunt motivul principal pentru care echipele adoptă Composition API: logica partajată devine o funcție simplă și testabilă în loc de cod împrăștiat sau duplicat.