एक composable एक पुनः उपयोग योग्य फ़ंक्शन है जो Composition API का उपयोग करके stateful logic को encapsulate करता है। परंपरा के अनुसार इसे useXxx नाम दिया जाता है और यह reactive state साथ ही फ़ंक्शन रिटर्न करता है — आपको mixins या दोहराव के बिना components के बीच logic साझा करने देता है।
{ 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 मिलता है — composables हर कॉल पर ताज़ी 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 };
}
Composables lifecycle hooks, watchers, और अन्य composables का उपयोग कर सकते हैं — और महत्वपूर्ण रूप से, वे अपनी खुद की 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
Composables 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 को अपनाने का प्राथमिक कारण हैं: shared logic एक सरल, testable फ़ंक्शन बन जाता है बजाय बिखरे हुए या डुप्लिकेट कोड के।