ਇਕ composable ਇਕ ਮੁੜ ਵਰਤ ਯੋਗ ਫੰਕਸ਼ਨ ਹੈ ਜੋ Composition API ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ stateful logic ਨੂੰ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ। ਰਵਾਇਤ ਅਨੁਸਾਰ ਇਸਦਾ ਨਾਮ useXxx ਹੈ ਅਤੇ ਇਹ reactive state ਅਤੇ ਫੰਕਸ਼ਨ ਵਾਪਸ ਕਰਦਾ ਹੈ — ਜਿਸ ਨਾਲ ਤੁਸੀਂ 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 ਹਰ ਕਾਲ ਪ੍ਰਤੀ ਤਾਜ਼ਾ 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 ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਨ — ਅਤੇ ਮਹੱਤਵਪੂਰਣ ਤੌਰ 'ਤੇ, ਉਹ ਆਪਣੀ ਸਾਫ ਸਫਾਈ ਨੂੰ ਸ਼ਾਮਲ ਕਰਦੇ ਹਨ (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 ਨੂੰ ਨਿਕਾਲਣ ਅਤੇ ਮੁੜ ਵਰਤ ਕਰਨ ਦਾ ਮੁੱਖ ਤਰੀਕਾ ਹਨ — ਡਾਟਾ fetching, ਫਾਰਮ ਸੰਭਾਲ, mouse/scroll ਟਰੈਕਿੰਗ, debouncing, ਆਦਿ।
ਉਹ logic-reuse ਸਮੱਸਿਆ ਨੂੰ ਸਾਫ ਤੌਰ 'ਤੇ ਹੱਲ ਕਰਦੇ ਹਨ (ਸਪਸ਼ਟ, collision-free, composable, TypeScript-ਦੋਸਤਾਨਾ) ਜਿੱਥੇ Vue 2 ਦੇ mixins ਅਸਫਲ ਹੋਏ।
ਉਹ Composition API ਨੂੰ ਅਪਨਾਉਣ ਦਾ ਮੁੱਖ ਕਾਰਨ ਹਨ: ਸਾਂਝਾ ਕੀਤਾ logic ਇੱਕ ਸਧਾਰਨ, ਪਰੀਖ ਯੋਗ ਫੰਕਸ਼ਨ ਬਣ ਜਾਂਦਾ ਹੈ ਬਜਾਏ ਖਿੰਡਾ ਜਾਂ ਨਕਲ ਕੀਤੇ ਕੋਡ ਦੇ।