કમ્પોઝેબલ એ પુનઃવપરાશમાં આવતું ફંક્શન છે જે Composition API નો ઉપયોગ કરીને સ્ટેટફુલ લોજિક ને encapsulate કરે છે. પરંપરા દ્વારા તેનું નામ useXxx છે અને તે reactive state વતી functions પરત કરે છે — તમને components વચ્ચે logic શેર કરવા દે છે mixins અથવા પુનરાવર્તન વિના।
{ 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>
જે દરેક component જે useCounter() ને કોલ કરે છે તેને તેનો પોતાનો અલગ count મળે છે — કમ્પોઝેબલ્સ દર કોલ પર તાજું state બનાવે છે, શેર થયેલ module-level variable ની જેમ નહીં।
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 };
}
કમ્પોઝેબલ્સ lifecycle hooks, watchers અને અન્ય કમ્પોઝેબલ્સ વાપર શકે છે — અને મહત્વનું, તેઓ તેમની પોતાની cleanup encapsulate કરે છે (onUnmounted), તેથી consumers ને તે યાદ રાખવું પડતું નથી।
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
કમ્પોઝેબલ્સ Vue 3 માં stateful logic નિષ્કાસન અને પુનઃવપરાશ કરવાનો આ idiomatic રીત છે — data fetching, form handling, mouse/scroll tracking, debouncing, વગેરે।
તેઓ logic-reuse સમસ્યાને સ્વચ્છતાથી હલ કરે છે (સ્પષ્ટ, collision-free, composable, TypeScript-friendly) જ્યાં Vue 2 ના mixins નિષ્ફળ ગયા હતા।
તેઓ Composition API અપનાવવાનું પ્રાથમિક કારણ છે: શેર થયેલ logic એક સરળ, testable ફંક્શન બને છે વિતરિત અથવા ડુપ્લિકેટ કોડ ને બદલે।