কম্পোজিশন API এর পরিচিতি

Vue 3 এ কম্পোজিশন API একটি নতুন পদ্ধতি হিসেবে যোগ করা হয়েছে, যা বিশেষ করে বড় এবং জটিল অ্যাপ্লিকেশন তৈরি করতে সুবিধাজনক। এটি Vue 2 এর অপশনাল API (যেমন data, methods, computed, ইত্যাদি) থেকে কিছুটা আলাদা এবং অধিক ফ্লেক্সিবল, স্কেলেবল এবং রিইউজেবল কোড তৈরি করতে সহায়তা করে।

কম্পোজিশন API ব্যবহার করার মাধ্যমে, আপনি স্টেট, লজিক এবং ইফেক্টস আলাদা আলাদা ভাবে কাঠামোবদ্ধ করতে পারেন, যা বড় অ্যাপ্লিকেশন মেইন্টেইন এবং স্কেল করা অনেক সহজ করে তোলে। এটি বিশেষ করে কম্পোনেন্টস বা কোডের অংশগুলোর মধ্যে পুনঃব্যবহারযোগ্যতা বৃদ্ধি করতে সাহায্য করে।

১. কম্পোজিশন API কি?

কম্পোজিশন API একটি নতুন পদ্ধতি, যা কোডকে কম্পোনেন্টের বিভিন্ন অংশে ভাঙার পরিবর্তে, আপনাকে এক জায়গায় কোড লিখতে এবং বিভিন্ন লজিক ও স্টেট একসাথে গ্রুপ করতে সুযোগ দেয়। এতে, একই কাজের জন্য বেশি কোড না লিখে, কোডের পুনঃব্যবহার এবং মেইন্টেনেবলিটি সহজ হয়।

কম্পোজিশন API ৩টি মূল ধারণার উপর কাজ করে:

• reactive state: রিয়্যাকটিভ ডেটা বা স্টেট তৈরি করা।
• computed properties: ডেটার উপর ভিত্তি করে প্রোপার্টি তৈরি করা।
• watchers: ডেটা পরিবর্তিত হলে কিছু কার্যক্রম চালানো।

২. কম্পোজিশন API এর ব্যবহার

কম্পোজিশন API ব্যবহারের জন্য setup() ফাংশনটি ব্যবহার করতে হয়। এই ফাংশনটি একটি কম্পোনেন্টের ইনিশিয়ালাইজেশন প্রক্রিয়া শুরু করার সময় ডেটা, মেথডস এবং রিঅ্যাক্টিভ প্রপার্টিজকে আর্গুমেন্ট হিসেবে রিটার্ন করে।

setup() ফাংশন:

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">Increment</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';  // Vue থেকে কম্পোজিশন API ইম্পোর্ট করা

export default {
  setup() {
    // reactive data using ref()
    const message = ref('Hello, Composition API!');
    const count = ref(0);

    // method to increment count
    const increment = () => {
      count.value++;
    };

    // return the variables and methods to be used in the template
    return {
      message,
      count,
      increment
    };
  }
};
</script>

এখানে:

• ref(): এটি রিয়্যাকটিভ ডেটা তৈরি করতে ব্যবহৃত হয়। ref() হুক ব্যবহার করে আমরা একটি স্টেট বা ভ্যালু রিয়্যাকটিভভাবে সংরক্ষণ করতে পারি।
• setup(): এটি একটি বিশেষ ফাংশন যা Vue 3 কম্পোনেন্টে কম্পোজিশন API ব্যবহারের সময় ডেটা এবং মেথড রিটার্ন করতে ব্যবহৃত হয়।

৩. reactive() এবং ref():

• ref(): একটি সাধারণ মান, যেমন সংখ্যা বা স্ট্রিং, রিয়্যাকটিভ বানাতে ref() ব্যবহৃত হয়।
• reactive(): একটি অবজেক্ট বা অ্যারে রিয়্যাকটিভ বানাতে reactive() ব্যবহৃত হয়।

উদাহরণ:

import { reactive, ref } from 'vue';

export default {
  setup() {
    const count = ref(0);  // primitive value
    const user = reactive({ name: 'John', age: 30 });  // object

    // increment count
    const increment = () => {
      count.value++;
    };

    // return values to be used in template
    return {
      count,
      increment,
      user
    };
  }
};

এখানে, count রিয়্যাকটিভ প্রপার্টি হিসেবে ref() দিয়ে তৈরি করা হয়েছে এবং user অবজেক্টটি reactive() ব্যবহার করে রিয়্যাকটিভ করা হয়েছে।

৪. computed() এবং watch():

• computed(): এটি এমন প্রপার্টি তৈরি করতে ব্যবহৃত হয় যা ডেটার উপর ভিত্তি করে মান ক্যালকুলেট বা কম্পিউট করে।
• watch(): এটি ডেটার পরিবর্তন শনাক্ত করে এবং কোন কার্যক্রম চালায়।

উদাহরণ:

import { reactive, computed, watch } from 'vue';

export default {
  setup() {
    const state = reactive({ count: 0 });

    // computed property
    const doubleCount = computed(() => state.count * 2);

    // watch to detect changes in count
    watch(
      () => state.count,
      (newValue, oldValue) => {
        console.log(`Count changed from ${oldValue} to ${newValue}`);
      }
    );

    return {
      state,
      doubleCount
    };
  }
};

এখানে:

• computed(): doubleCount একটি কম্পিউটেড প্রপার্টি তৈরি করেছে যা state.count এর উপর ভিত্তি করে মান ক্যালকুলেট করে।
• watch(): state.count এর পরিবর্তন শনাক্ত করে একটি কাস্টম কার্যক্রম (এখানে কনসোল লগ) চালাচ্ছে।

৫. কম্পোজিশন API এর সুবিধা

• কোডের পুনঃব্যবহারযোগ্যতা: একাধিক কম্পোনেন্টে একই লজিক ব্যবহার করতে setup() এর মধ্যে ফাংশন এবং রিয়্যাকটিভ ডেটা ভাগ করা সহজ হয়।
• স্পষ্টতা এবং পরিষ্কার কোড: বড় অ্যাপ্লিকেশনগুলোতে কোডের অংশগুলো পরিষ্কারভাবে আলাদা করা হয়, যা মেইনটেইন এবং স্কেল করা সহজ করে।
• এটা লজিকাল গ্রুপিংয়ের জন্য উপযুক্ত: একাধিক মেথড এবং স্টেট সম্পর্কিত কোডগুলো এক জায়গায় একত্রিত করা যায়, যা অপশনাল API তে সম্ভব নয়।
• স্কেলেবিলিটি: বড় অ্যাপ্লিকেশন তৈরি করার সময় কম্পোজিশন API কোডের পুনঃব্যবহারযোগ্যতা এবং রক্ষণাবেক্ষণ সহজ করে।

সারাংশ

Vue.js এর কম্পোজিশন API একটি নতুন পদ্ধতি, যা আপনাকে কোডকে আরো কার্যকরীভাবে সাজাতে, পুনঃব্যবহারযোগ্যতা বাড়াতে এবং অ্যাপ্লিকেশন স্কেলেবিলিটি উন্নত করতে সহায়তা করে। এটি setup() ফাংশন ব্যবহার করে রিয়্যাকটিভ ডেটা, কম্পিউটেড প্রপার্টি, এবং মেথড গুলি এক জায়গায় সংজ্ঞায়িত করতে দেয়, যা কোডের মান এবং মেইনটেনেবিলিটি বাড়ায়।