A composable हा एक पुनर्वापरयोग्य फंक्शन आहे जो Composition API वापरून stateful logic एनक्याप्सुलेट करतो। कन्व्हेन्शनद्वारे याचे नाव useXxx असते आणि ते रिएक्टिव स्टेट आणि फंक्शन्स रिटर्न करते — तुम्हाला 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>
प्रत्येक कम्पोनेंट जो useCounter() कॉल करतो तो त्याचे स्वतः अलग count मिळवते — composables प्रत्येक कॉलसाठी नवीन स्टेट तयार करतात, मॉड्यूल-लेव्हल व्हेरिएबल शेअर करण्यास विरोध.
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 वापरू शकते — आणि महत्त्वाचे म्हणजे, ते त्यांचे स्वतः क्लीनअप एनक्याप्सुलेट करतात (onUnmounted), त्यामुळे उपभोक्त्यांना हे लक्षात ठेवावे लागत नाही.
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 काढून घेणे आणि पुनर्वापरण करण्याचा idiomatik मार्ग आहे — डेटा फेचिंग, फॉर्म हँडलिंग, माउस/स्क्रोल ट्रॅकिंग, डिबाउंसिंग इ.
ते logic-reuse समस्या स्वच्छपणे सोडवतात (स्पष्ट, टक्कर-मुक्त, कम्पोजेबल, TypeScript-अनुकूल) जेथे Vue 2 च्या mixins अयशस्वी झाले.
ते Composition API अपनाण्याचे मुख्य कारण आहे: शेअर केलेला लॉजिक साधा, चाचणीयोग्य फंक्शन बनतो ज्याऐवजी विखुरलेला किंवा डुप्लिकेट केलेला कोड.