Një composable është një funksion i ripërdorshëm që përfshin stateful logic duke përdorur Composition API. Sipas konvencioni emerohet useXxx dhe kthen gjendjen reaktive plus funksione — duke ju lejuar të ndani logjikën në komponentë pa mixins ose përsëritje.
{ 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>
Sekdo komponente që thërret useCounter() merr të sajen izoluar count — composables-et krijojnë gjendje të freskët për secilin thirrje, ndryshe nga një ndryshore e ndarë në nivel moduli.
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-et mund të përdorin lifecycle hooks, watchers dhe composables-e të tjerë — dhe në mënyrë vendimtare, ata përfshijnë pastrimin e tyre (onUnmounted), kështu që konsumatorët nuk duhet ta kujtojnë atë.
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-et janë mënyra idiomatike për nxjerrje dhe ripërdorim të stateful logic-ut në Vue 3 — marrja e të dhënave, përpunimi i formave, ndjekja e miut/scrollimit, debouncing etj.
Ata zgjidhin problemin e ripërdorimit të logjikës në mënyrë të pastër (eksplicite, pa përplasje, komponuese, miqësore ndaj TypeScript) ku mixins-et e Vue 2 dështuan.
Janë arsyeja kryesore që ekipet përqafonin Composition API: logika e ndarë bëhet një funksion i thjeshtë, i testeshëm në vend të kodit të shpërndarë ose të duplikuar.