Reactive ডেটা এবং রিফ কম্পোজিশন API তে

Vue.js এর কম্পোজিশন API হল একটি আধুনিক এবং শক্তিশালী API যা Vue 3 থেকে পরিচিত, এবং এটি কিভাবে ডেটা এবং ফাংশনগুলি কম্পোনেন্টে সংগঠিত ও ব্যবহৃত হবে তা নির্ধারণ করতে সাহায্য করে। এর মধ্যে reactive এবং ref দুটি গুরুত্বপূর্ণ ফিচার রয়েছে, যা ডেটা ম্যানেজমেন্ট এবং রিয়্যাক্টিভিটি সংক্রান্ত কার্যক্রমকে আরও সহজ ও শক্তিশালী করে তোলে।

এখানে, আমরা reactive এবং ref এর ভূমিকা এবং ব্যবহার নিয়ে বিস্তারিত আলোচনা করব।

১. Reactive ডেটা (reactive)

Vue 3 এ, reactive হল একটি নতুন পদ্ধতি, যা ডেটাকে রিয়্যাক্টিভ (reactive) বানাতে ব্যবহৃত হয়। এর মানে হল যে যখন আপনি reactive অবজেক্টের ডেটাতে কোনো পরিবর্তন করবেন, Vue.js তা স্বয়ংক্রিয়ভাবে UI তে রিফ্লেক্ট করবে। এটি Vue 2 এর data প্রপার্টি থেকে উন্নত একটি নতুন পদ্ধতি।

reactive ব্যবহার:

// main.js (বা অন্যান্য কম্পোনেন্ট ফাইলে)
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      message: 'Hello, Vue 3!',
      count: 0
    });

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

    return {
      state,
      increment
    };
  }
};

এখানে:

• reactive() ফাংশনটি একটি reactive অবজেক্ট তৈরি করে, যাতে message এবং count এর মান পরিবর্তিত হলে Vue.js UI তে তা স্বয়ংক্রিয়ভাবে পরিবর্তিত হবে।
• increment() মেথডটি state.count এর মান বাড়িয়ে দেয়, এবং এই পরিবর্তনটি UI তে রিফ্লেক্ট হবে।

টেমপ্লেট:

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

এখানে, state.message এবং state.count এর মান পরিবর্তন হলে Vue.js UI আপডেট করবে, কারণ এটি reactive অবজেক্টের অংশ।

২. Ref ডেটা (ref)

Ref একটি ফাংশন যা ডেটাকে রিয়্যাক্টিভ করতে ব্যবহৃত হয়, তবে এটি সাধারণত primitive values (যেমন: string, number, boolean) এবং DOM এলিমেন্টের জন্য ব্যবহৃত হয়। এটি reactive এর মতো অবজেক্ট ডেটার জন্য কাজ করে না, বরং একক মানের জন্য এটি কার্যকরী।

ref ব্যবহার করলে Vue.js আপনাকে value প্রপার্টি থেকে ডেটার মান অ্যাক্সেস এবং সেট করতে দেয়।

ref ব্যবহার:

// main.js (বা অন্যান্য কম্পোনেন্ট ফাইলে)
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue 3 with ref!');
    const count = ref(0);

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

    return {
      message,
      count,
      increment
    };
  }
};

এখানে:

• ref() ফাংশনটি message এবং count কে রিয়্যাক্টিভ বানিয়েছে।
• count.value++ এর মাধ্যমে count এর মান পরিবর্তন করা হয়েছে, কারণ ref ব্যবহার করলে .value প্রপার্টি দিয়ে ডেটার মান পরিবর্তন করতে হয়।

টেমপ্লেট:

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

এখানে, message এবং count রিয়্যাক্টিভ ডেটা হিসেবে টেমপ্লেটে ব্যবহৃত হচ্ছে এবং count এর মান পরিবর্তন হলে তা UI তে স্বয়ংক্রিয়ভাবে রিফ্লেক্ট হবে।

৩. Ref এবং Reactive এর মধ্যে পার্থক্য

• reactive ব্যবহার করলে আপনি অবজেক্ট বা অ্যারে তৈরি করতে পারেন এবং তা সরাসরি অ্যাক্সেস করতে পারেন।
• ref ব্যবহার করলে সাধারণত একক মান বা primitive values (যেমন string, number) রিয়্যাক্টিভ করা হয় এবং .value প্রপার্টি ব্যবহার করতে হয়।

৪. কম্পোজিশন API (Composition API)

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

কম্পোজিশন API ব্যবহার:

import { reactive, ref } from 'vue';

export default {
  setup() {
    const state = reactive({
      message: 'Hello, Vue 3 with Composition API!',
      count: 0
    });
    
    const name = ref('Vue');
    
    const increment = () => {
      state.count++;
    };

    return {
      state,
      name,
      increment
    };
  }
};

এখানে, reactive এবং ref দুটি একসাথে ব্যবহার করা হয়েছে, যেখানে state একটি অবজেক্ট এবং name একটি primitive value হিসেবে ref ব্যবহার করেছে। setup() ফাংশনের মাধ্যমে লজিকটি টেমপ্লেটের সাথে সংযুক্ত করা হয়েছে।

সারাংশ

• reactive: অবজেক্ট এবং অ্যারে ডেটাকে রিয়্যাক্টিভ করে, এবং Vue.js UI তে স্বয়ংক্রিয়ভাবে পরিবর্তন রিফ্লেক্ট করে।
• ref: Primitive values (যেমন string, number) রিয়্যাক্টিভ করতে ব্যবহৃত হয় এবং .value প্রপার্টি ব্যবহার করে ডেটার মান অ্যাক্সেস করা হয়।
• Composition API: Vue 3 এর একটি নতুন পদ্ধতি যা কম্পোনেন্টের লজিককে আলাদা করে ব্যবস্থাপনা এবং রিইউজেবিলিটি সহজ করে তোলে, এবং এতে setup() ফাংশন ব্যবহৃত হয়।

এভাবে Vue.js এর reactive এবং ref ব্যবহারের মাধ্যমে আপনি আপনার অ্যাপ্লিকেশন ডেটাকে আরও স্কেলেবল এবং রিয়্যাক্টিভভাবে পরিচালনা করতে পারবেন।