Composable ni kazi inayoweza kutumiwa tena ambayo inawakilisha stateful logic kwa kutumia Composition API. Kwa kawaida inaitwa useXxx na inarejesha hali inayobadilika na vipengele vya kazi — kuruhusu umunjaji wa mantiki kati ya vijenzi bila mixins au kurudia.
{ 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>
Kila sehemu inayoita useCounter() inapata yake yenyewe iliyotengana count — composables huunda hali mpya kwa kila simu, tofauti na ujumbe ulioshirikiwa katika kiwango cha 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 inaweza kutumia lifecycle hooks, watchers na composables nyingine — na muhimu, wao wanatayarisha utengano wao wenyewe (onUnmounted), kwa hivyo watumiaji hawana haja ya kukumbuka.
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 ni njia ya kiisimu ya kuondoa na kutumiwa tena stateful logic katika Vue 3 — ukuaji wa data, udhibiti wa fomu, ufuataji wa panya/kupakia, debouncing, n.k.
Wao hutatua tatizo la kutumiwa tena kwa mantiki safi (wazi, bila migogoro, inayoweza kuwa na mtu, TypeScript-rafiki) ambapo Vue 2 mixins likosa.
Ni sababu kuu ya kuwa timu zinatumia Composition API: mantiki inayoshirikiwa inakuwa kazi rahisi, inayotestinezwa badala ya koodi iliyotenganishwa au kurudia.