লাইফসাইকেল হুকস এবং কম্পোজিশন API

Vue.js এর লাইফসাইকেল হুকস এবং কম্পোজিশন API দুটি মৌলিক ধারণা যা Vue অ্যাপ্লিকেশন ডেভেলপমেন্টে অত্যন্ত গুরুত্বপূর্ণ। লাইফসাইকেল হুকস অ্যাপ্লিকেশনটি কিভাবে একটি কম্পোনেন্ট লোড হয়, আপডেট হয় এবং ধ্বংস হয় তা নিয়ন্ত্রণ করতে সহায়তা করে, আর কম্পোজিশন API নতুন একটি পদ্ধতি যা কম্পোনেন্ট লজিক পরিচালনা ও ভাগ করে নেওয়ার সুবিধা দেয়।

১. লাইফসাইকেল হুকস

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

Vue কম্পোনেন্টের লাইফসাইকেল প্রধানত ৩টি পর্যায়ে বিভক্ত:

• Creation (তৈরি হওয়া): কম্পোনেন্ট তৈরি হওয়া, data এবং props সেট করা।
• Update (আপডেট হওয়া): যখন কম্পোনেন্টের ডেটা বা প্রপার্টি পরিবর্তিত হয়।
• Destruction (ধ্বংস হওয়া): কম্পোনেন্ট ধ্বংস হওয়া, এবং রিসোর্স মুছে ফেলা।

লাইফসাইকেল হুকস এর উদাহরণ:

Vue.js এ কিছু সাধারণ লাইফসাইকেল হুকস নিচে আলোচনা করা হলো:

১.1. created():

এই হুকটি কম্পোনেন্ট তৈরি হওয়ার পর প্রথমে কল হয়, কিন্তু এটি DOM-এ রেন্ডার হওয়ার আগেই কল হয়।

new Vue({
  created() {
    console.log('Component is created!');
  }
});

১.2. mounted():

এই হুকটি কম্পোনেন্ট DOM-এ রেন্ডার হওয়ার পর কল হয়। এটি সাধারণত API কল বা DOM ম্যানিপুলেশনের জন্য ব্যবহৃত হয়।

new Vue({
  mounted() {
    console.log('Component is mounted to the DOM!');
  }
});

১.3. updated():

এই হুকটি কম্পোনেন্টের ডেটা পরিবর্তন হওয়ার পর কল হয়, যখন কম্পোনেন্টের ডেটা বা প্রপার্টি আপডেট হয়।

new Vue({
  data: {
    message: 'Hello'
  },
  updated() {
    console.log('Component is updated!');
  }
});

১.4. destroyed():

এই হুকটি কম্পোনেন্ট ধ্বংস হওয়ার আগে কল হয়। এটি সাধারণত ক্লিনআপ কাজের জন্য ব্যবহৃত হয়, যেমন টাইমার বা সাবস্ক্রিপশন বন্ধ করা।

new Vue({
  destroyed() {
    console.log('Component is destroyed!');
  }
});

লাইফসাইকেল হুকসের একটি সাধারণ উদাহরণ:

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  created() {
    console.log('Component is created!');
  },
  mounted() {
    console.log('Component is mounted to the DOM!');
  },
  updated() {
    console.log('Component is updated!');
  },
  destroyed() {
    console.log('Component is destroyed!');
  }
});

২. কম্পোজিশন API

কম্পোজিশন API হল Vue 3 এর নতুন বৈশিষ্ট্য, যা কম্পোনেন্টের লজিক আরও কার্যকরভাবে ভাগ করে নেওয়ার এবং পুনঃব্যবহারযোগ্য করার সুযোগ দেয়। এটি মূলত Options API এর পরিবর্তে আসে, যা Vue 2 তে ব্যবহৃত হত। কম্পোজিশন API আপনাকে ডেটা, মেথড এবং লাইফসাইকেল হুকস একসাথে কম্পোজ করতে সহায়তা করে, যা কোডের রিডেবিলিটি এবং স্কেলেবিলিটি বাড়ায়।

কম্পোজিশন API এর মূল ফাংশনগুলো:

• reactive(): ডেটাকে রিয়্যাকটিভ তৈরি করে, অর্থাৎ ডেটার পরিবর্তনে UI আপডেট হয়।
• ref(): প্রিমিটিভ ভ্যালুর জন্য রিয়্যাকটিভ রেফারেন্স তৈরি করে।
• computed(): গণনাযোগ্য প্রপার্টি তৈরি করে যা নির্দিষ্ট ডেটার ওপর ভিত্তি করে মান রিটার্ন করে।
• watch(): ডেটা বা প্রপার্টি পরিবর্তন হলে কোনো ফাংশন চালায়।

কম্পোজিশন API এর উদাহরণ:

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

export default {
  setup() {
    // রিয়্যাকটিভ ডেটা
    const state = reactive({
      message: 'Hello, Vue 3!'
    });

    // কম্পিউটেড প্রপার্টি
    const reversedMessage = computed(() => state.message.split('').reverse().join(''));

    // ওয়াচার
    watch(() => state.message, (newMessage, oldMessage) => {
      console.log(`Message changed from "${oldMessage}" to "${newMessage}"`);
    });

    // লাইফসাইকেল হুক
    onMounted(() => {
      console.log('Component is mounted!');
    });

    // কম্পোনেন্ট থেকে ডেটা রিটার্ন করা
    return {
      state,
      reversedMessage
    };
  }
};

এখানে:

• reactive() ব্যবহার করে state নামের রিয়্যাকটিভ অবজেক্ট তৈরি করা হয়েছে।
• computed() ব্যবহার করে একটি reversedMessage তৈরি করা হয়েছে যা state.message এর বিপরীত রূপ প্রদর্শন করে।
• watch() ব্যবহার করে message এর পরিবর্তন ট্র্যাক করা হচ্ছে।
• onMounted() ব্যবহার করে কম্পোনেন্ট মাউন্ট হওয়ার পর একটি কলব্যাক ফাংশন এক্সিকিউট করা হচ্ছে।

৩. কম্পোজিশন API এবং লাইফসাইকেল হুকস

Vue 3 এর কম্পোজিশন API তে লাইফসাইকেল হুকস ব্যবহারের জন্য, onMounted, onUpdated, onBeforeUnmount ইত্যাদি হুকসের ফাংশনগুলো সরাসরি ব্যবহার করা হয়।

উদাহরণ:

import { onMounted, onUpdated, onBeforeUnmount } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component mounted!');
    });

    onUpdated(() => {
      console.log('Component updated!');
    });

    onBeforeUnmount(() => {
      console.log('Component about to be destroyed!');
    });
  }
};

এখানে onMounted, onUpdated, এবং onBeforeUnmount কম্পোজিশন API এর লাইফসাইকেল হুকস।

সারাংশ

• লাইফসাইকেল হুকস: Vue কম্পোনেন্টের জীবনের বিভিন্ন পর্যায়ে কিছু নির্দিষ্ট ফাংশন চালানো যায়, যেমন created(), mounted(), updated(), এবং destroyed()। এগুলো আপনাকে কম্পোনেন্টের কার্যকারিতা নিয়ন্ত্রণ করতে সাহায্য করে।
• কম্পোজিশন API: Vue 3 এর নতুন ফিচার যা কম্পোনেন্টের লজিক ভাগ করা এবং পুনঃব্যবহারযোগ্য করার জন্য ব্যবহৃত হয়। reactive(), computed(), watch(), এবং লাইফসাইকেল হুকস সহ অন্যান্য ফিচার এটি সরবরাহ করে।

এগুলি Vue 3 এর উন্নত এবং ফ্লেক্সিবল কাঠামো তৈরি করতে সহায়তা করে, যা ডেভেলপারদের জন্য একটি শক্তিশালী টুলসেট প্রদান করে।