एक composable एक पुनः प्रयोगयोग्य फलन हो जसले Composition API को प्रयोग गरेर stateful logic लाई समावेश गर्दछ। परम्परा अनुसार यसको नाम useXxx हुन्छ र यसले reactive state र फलनहरू फर्काउँछ — जसले तपाईलाई mixins वा पुनरावृत्ति बिना घटकहरू भर 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>
प्रत्येक घटक जसले useCounter() लाई कल गर्छ, यसको आफ्नो अलग गरिएको count पाउँछ — composables प्रत्येक कलमा ताजा state सिर्जना गर्दछ, साझा module-level चरको विपरीत।
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 समावेश गर्दछ (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 निकाल्न र पुनः प्रयोग गर्नको को मुहान तरिका हुन् — data fetching, form handling, mouse/scroll tracking, debouncing, आदि।
तिनीहरूले logic-reuse समस्यालाई सफासैथ समाधान गर्दछ (स्पष्ट, collision-free, composable, TypeScript-friendly) जहाँ Vue 2 को mixins असफल भयो।
तिनीहरू Composition API लाई अपनाउने टीमहरूको प्राथमिक कारण हुन्: साझा logic एक सरल, परीक्षणयोग्य फलन बन्छ खण्डित वा पुनरावृत्त कोडको सट्टा।