Vue.js এ কম্পিউটেড প্রপার্টিজ (Computed Properties) এবং ওয়াচারস (Watchers) দুটি গুরুত্বপূর্ণ ফিচার যা ডেটা ম্যানিপুলেশন এবং ভিউ আপডেট করার সময় ব্যবহৃত হয়। এই দুটি ভিন্নভাবে কাজ করে তবে তাদের উদ্দেশ্য একই — যখন ডেটাতে পরিবর্তন হয়, তখন ভিউকে স্বয়ংক্রিয়ভাবে আপডেট করা।
১. কম্পিউটেড প্রপার্টিজ (Computed Properties)
কম্পিউটেড প্রপার্টি হলো এমন একটি প্রপার্টি যা অন্য ডেটা প্রপার্টি বা স্টেটের উপর নির্ভরশীল এবং সেই ডেটা পরিবর্তন হলে তা স্বয়ংক্রিয়ভাবে আপডেট হয়। কম্পিউটেড প্রপার্টি সাধারণত কোনো স্টেট বা ডেটার উপর ভিত্তি করে ডাইনামিক ভ্যালু তৈরি করে।
কীভাবে কাজ করে:
কম্পিউটেড প্রপার্টি সাধারণত getter ফাংশন হিসেবে ব্যবহৃত হয়, যা ভিউতে ব্যবহৃত হওয়ার সময় কার্যকর হয়।
উদাহরণ:
<template>
<div>
<p>{{ fullName }}</p>
<input v-model="firstName" placeholder="First Name">
<input v-model="lastName" placeholder="Last Name">
</div>
</template>
<script>
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
};
},
computed: {
// কম্পিউটেড প্রপার্টি fullName
fullName() {
return `${this.firstName} ${this.lastName}`;
}
}
};
</script>
ব্যাখ্যা:
- এখানে
fullNameএকটি কম্পিউটেড প্রপার্টি যাfirstNameএবংlastNameএর উপর ভিত্তি করে একটি পূর্ণ নাম তৈরি করে। - যখন
firstNameবাlastNameপরিবর্তিত হয়,fullNameস্বয়ংক্রিয়ভাবে আপডেট হয়।
কম্পিউটেড প্রপার্টির সুবিধা:
- এটি ক্যাশে করা হয়। অর্থাৎ, যখন নির্দিষ্ট ডেটা (যেমন
firstNameবাlastName) পরিবর্তিত হয়, তখন শুধুমাত্র সেই প্রপার্টি আপডেট হয়, পুরো ভ্যালু পুনরায় ক্যালকুলেট হয় না। - এটি পারফর্মেন্স অপটিমাইজেশন করতে সাহায্য করে, বিশেষ করে বড় এবং জটিল প্রোজেক্টে।
২. ওয়াচারস (Watchers)
ওয়াচার হল এমন একটি ফিচার যা Vue ইনস্ট্যান্সের ডেটা বা কম্পোনেন্ট প্রপার্টি পরিবর্তন হওয়া নিরীক্ষণ করে এবং সে পরিবর্তনের উপর নির্ভর করে কোনো কার্যক্রম সম্পাদন করে। সাধারণত ওয়াচারকে অ্যাসিনক্রোনাস অপারেশন যেমন API কল, ডেটা ফেচিং, অথবা ফাংশন ট্রিগার করার জন্য ব্যবহার করা হয়।
কীভাবে কাজ করে:
ওয়াচার নির্দিষ্ট ডেটা প্রপার্টির উপর নজর রাখে এবং যখন সেটি পরিবর্তিত হয়, তখন একটি কাস্টম কার্যক্রম (callback function) চালায়।
উদাহরণ:
<template>
<div>
<p>{{ message }}</p>
<input v-model="message" placeholder="Type something">
</div>
</template>
<script>
export default {
data() {
return {
message: ''
};
},
watch: {
// message প্রপার্টির পরিবর্তন হলে ওয়াচার ট্রিগার হবে
message(newValue, oldValue) {
console.log(`Message changed from ${oldValue} to ${newValue}`);
}
}
};
</script>
ব্যাখ্যা:
- এখানে
messageএকটি ডেটা প্রপার্টি এবংwatchঅবজেক্টে আমরাmessageএর পরিবর্তন ট্র্যাক করছি। - যখন
messageপরিবর্তিত হয়, তখন ওয়াচার ফাংশনটি ট্রিগার হয় এবং পুরোনো এবং নতুন মান কনসোল লগ করা হয়।
ওয়াচারের সুবিধা:
- ওয়াচার সাধারণত অ্যাসিনক্রোনাস কার্যক্রমের জন্য উপযুক্ত, যেমন API কল, ডেটা লোডিং বা কোনো নির্দিষ্ট অ্যাকশন ট্রিগার করা।
- এটি অ্যাসিনক্রোনাস অপারেশনে সহায়ক হতে পারে, যেখানে আপনি ডেটা পরিবর্তনের পর কোনো কাজ সম্পাদন করতে চান।
কম্পিউটেড প্রপার্টি এবং ওয়াচারস এর তুলনা
| বৈশিষ্ট্য | কম্পিউটেড প্রপার্টি (Computed Properties) | ওয়াচার (Watchers) |
|---|---|---|
| ব্যবহার | স্টেটের উপর নির্ভরশীল মান ক্যালকুলেট করার জন্য | ডেটার পরিবর্তন ট্র্যাক এবং কার্যক্রম চালানোর জন্য |
| পারফর্মেন্স | ক্যাশে করা হয়, শুধু প্রয়োজন হলে পুনরায় ক্যালকুলেট হয় | অ্যাসিনক্রোনাস কাজের জন্য বেশি উপযুক্ত |
| উপযুক্ত ক্ষেত্র | সরল ডেটা ম্যানিপুলেশন | অ্যাসিনক্রোনাস অপারেশন (যেমন API কল) |
| রিএ্যাক্টিভিটি | রিএ্যাক্টিভ, অটোমেটিক আপডেট হয় | ডেটার পরিবর্তনে ম্যানুয়াল কার্যক্রম |
কখন কম্পিউটেড প্রপার্টি ব্যবহার করবেন?
- যখন আপনি একটি ডেরিভেটিভ ভ্যালু চান যা অন্যান্য ডেটা প্রপার্টি থেকে ক্যালকুলেট করা হয়।
- যখন আপনি ডেটা পরিবর্তন হলে বারবার কম্পিউটেশন না করে কেবলমাত্র ক্যাশে করা ফলাফল চান।
কখন ওয়াচার ব্যবহার করবেন?
- যখন আপনি ডেটার পরিবর্তন ট্র্যাক করতে চান এবং তার ভিত্তিতে কোনো কার্যক্রম সম্পাদন করতে চান, যেমন API কল বা অতিরিক্ত অ্যাসিনক্রোনাস কাজ।
- যখন ডেটার পরিবর্তন চেক করে, বিশেষ কোনো কার্যক্রম চালাতে হবে, যেমন ফর্ম ভ্যালিডেশন বা ডেটাবেস আপডেট।
এভাবে, কম্পিউটেড প্রপার্টি এবং ওয়াচার Vue.js এ ডেটা ম্যানিপুলেশন এবং ডেটা পরিবর্তনের উপর ভিত্তি করে ভিউ আপডেট করতে সহায়ক হয়, এবং প্রতিটি ফিচার নির্দিষ্ট কাজের জন্য উপযুক্ত।
Read more
