Composables কী এবং আপনি কীভাবে একটি লিখবেন?

Question

Composables কী এবং আপনি কীভাবে একটি লিখবেন?

Accepted Answer

একটি **composable** হল একটি পুনঃব্যবহারযোগ্য ফাংশন যা Composition API ব্যবহার করে **stateful logic** এনক্যাপসুলেট করে। কনভেনশন অনুযায়ী এটি `useXxx` নামে নামকরণ করা হয় এবং প্রতিক্রিয়াশীল state প্লাস ফাংশন রিটার্ন করে — যা আপনাকে mixins বা পুনরাবৃত্তি ছাড়াই কম্পোনেন্টগুলিতে logic শেয়ার করতে দেয়। ## একটি composable লেখা ```js // composables/useCounter.js import { ref, computed } from "vue"; export function useCounter(initial = 0) { const count = ref(initial); // encapsulated reactive state const double = computed(() => count.value * 2); function increment() { count.value++; } function reset() { count.value = initial; } return { count, double, increment, reset }; // expose the API } ``` ## যেকোনো কম্পোনেন্টে এটি ব্যবহার করা ```vue ``` প্রতিটি কম্পোনেন্ট যা `useCounter()` কল করে তার **নিজস্ব বিচ্ছিন্ন** `count` থাকে — composables প্রতিটি কলে তাজা state তৈরি করে, একটি শেয়ার্ড মডিউল-লেভেল ভেরিয়েবলের বিপরীতে। ## একটি বাস্তবসম্মত উদাহরণ: lifecycle সহ useFetch ```js 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`), তাই ভোক্তাদের এটি মনে রাখতে হবে না। ## Composables বনাম mixins (পুরাতন উপায়) ```text 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, form handling, mouse/scroll tracking, debouncing, ইত্যাদি। তারা logic-reuse সমস্যা পরিষ্কারভাবে সমাধান করে (স্পষ্ট, collision-free, composable, TypeScript-friendly) যেখানে Vue 2-এর mixins ব্যর্থ হয়েছিল। তারা কেন teams Composition API গ্রহণ করে তার প্রাথমিক কারণ: শেয়ার্ড logic একটি সাধারণ, testable ফাংশন হয়ে ওঠে বিক্ষিপ্ত বা সদৃশ কোডের পরিবর্তে।