Vue Watchers
একজন পর্যবেক্ষক এমন একটি পদ্ধতি যা একই নামের একটি ডেটা বৈশিষ্ট্য পর্যবেক্ষণ করে।
প্রতিবার ডেটা অ্যাট্রিবিউটের মান পরিবর্তন হলে একজন পর্যবেক্ষককে বরখাস্ত করা হয়।
কোনো নির্দিষ্ট ডেটা অ্যাট্রিবিউট মানের জন্য কোনো অ্যাকশনের প্রয়োজন হলে একজন প্রহরী ব্যবহার করুন।
The Watcher Concept
ওয়াচার্স হল Vue উদাহরণের চতুর্থ কনফিগারেশন বিকল্প যা আমরা শিখব। আমরা ইতিমধ্যে দেখেছি প্রথম তিনটি কনফিগারেশন বিকল্প হল 'ডেটা', 'পদ্ধতি' এবং 'গণনা করা'।
'ডেটা', 'পদ্ধতি' এবং 'কম্পিউটেড'-এর মতো, দর্শকদের Vue উদাহরণে একটি নির্দিষ্ট নাম রয়েছে: 'ঘড়ি'।
Syntax
পর্যবেক্ষকদের সিনট্যাক্স:
const app = Vue.createApp({
data() {
...
},
watch: {
...
},
computed: {
...
},
methods: {
...
}
})একজন পর্যবেক্ষক উপরের সবুজ এলাকায় নির্দেশিত একই নামের একটি ডেটা অ্যাট্রিবিউট নিরীক্ষণ করে।
আমরা কখনই পর্যবেক্ষক পদ্ধতি বলি না। এটি স্বয়ংক্রিয়ভাবে বলা হয় শুধুমাত্র যখন বৈশিষ্ট্যের মান পরিবর্তন হয়।
নতুন অ্যাট্রিবিউট মান সর্বদা পর্যবেক্ষক পদ্ধতিতে একটি ইনপুট আর্গুমেন্ট হিসাবে উপলব্ধ, এবং পুরানো মানও তাই।
Example
একটি <input type="range"> উপাদান একটি মানকে 'rangeVal'-এ পরিবর্তন করতে ব্যবহৃত হয়। ব্যবহারকারীকে 20 এবং 60 এর মধ্যে মান নির্বাচন করা থেকে বিরত রাখতে একটি প্রহরী ব্যবহার করা হয় যা অবৈধ বলে বিবেচিত হয়।
<input type="range" v-model="rangeVal">
<p>{{ rangeVal }}</p>
const app = Vue.createApp({
data() {
return {
rangeVal: 70
}
},
watch: {
rangeVal(val){
if( val>20 && val<60) {
if(val<40){
this.rangeVal = 20;
}
else {
this.rangeVal = 60;
}
}
}
}
})A Watcher with New and Old Values
নতুন অ্যাট্রিবিউট মান ছাড়াও, আগের অ্যাট্রিবিউটের মান স্বয়ংক্রিয়ভাবে পর্যবেক্ষক পদ্ধতিতে একটি ইনপুট আর্গুমেন্ট হিসাবে উপলব্ধ।
Example
'updatePos' পদ্ধতিতে মাউস পয়েন্টার এক্স-পজিশন 'xPos' রেজিস্টার করার জন্য আমরা একটি <div> এলিমেন্টে ক্লিক ইভেন্ট সেট করি। একজন পর্যবেক্ষক প্রহরী পদ্ধতিতে পুরানো এবং নতুন ইনপুট আর্গুমেন্ট ব্যবহার করে নতুন এক্স-পজিশন এবং আগেরটির মধ্যে পিক্সেলের পার্থক্য গণনা করে।
<div v-on:click="updatePos"></div>
<p>{{ xDiff }}</p>
const app = Vue.createApp({
data() {
return {
xPos: 0,
xDiff: 0
}
},
watch: {
xPos(newVal,oldVal){
this.xDiff = newVal-oldVal
}
},
methods: {
updatePos(evt) {
this.xPos = evt.offsetX
}
}
})ইনপুট মিথ্যা থেকে সত্যে পরিবর্তিত হওয়ার সঠিক মুহুর্তে ব্যবহারকারীকে প্রতিক্রিয়া প্রদান করতে নতুন এবং পুরানো মানগুলিও ব্যবহার করা যেতে পারে:
Example
একটি <input> উপাদান থেকে মান একটি পর্যবেক্ষক আবদ্ধ হয়. যদি মানটিতে '@' থাকে তবে এটি একটি বৈধ ইমেল ঠিকানা হিসাবে বিবেচিত হয়৷ ব্যবহারকারী শেষ কী দিয়ে ইনপুটটি বৈধ, অবৈধ বা বৈধ কিনা তা জানানোর জন্য একটি প্রতিক্রিয়া পাঠ্য পায়।
<input type="email" v-model="inpAddress">
<p v-bind:class="myClass">{{ feedbackText }}</p>
const app = Vue.createApp({
data() {
return {
inpAddress: '',
feedbackText: '',
myClass: 'invalid'
}
},
watch: {
inpAddress(newVal,oldVal) {
if( !newVal.includes('@') ) {
this.feedbackText = 'The e-mail address is NOT valid';
this.myClass = 'invalid';
}
else if( !oldVal.includes('@') && newVal.includes('@') ) {
this.feedbackText = 'Perfect! You fixed it!';
this.myClass = 'valid';
}
else {
this.feedbackText = 'The e-mail address is valid :)';
}
}
}
})Watchers vs. Methods
পর্যবেক্ষক এবং পদ্ধতি উভয়ই ফাংশন হিসাবে লেখা হয়, তবে বেশ কয়েকটি পার্থক্য রয়েছে:
- HTML থেকে মেথড বলা হয়।
- একটি ঘটনা ঘটলে পদ্ধতি প্রায়ই বলা হয়.
- পদ্ধতিগুলি স্বয়ংক্রিয়ভাবে ইনপুট হিসাবে একটি ইভেন্ট অবজেক্ট গ্রহণ করে।
- আমরা একটি পদ্ধতিতে ইনপুট হিসাবে আমাদের পছন্দের অন্যান্য মানগুলিও পাস করতে পারি।
- পর্যবেক্ষকদের শুধুমাত্র তখনই ডাকা হয় যখন পর্যবেক্ষণ করা ডেটা অ্যাট্রিবিউটের মান পরিবর্তন হয় এবং এটি স্বয়ংক্রিয়ভাবে ঘটে।
- পর্যবেক্ষকরা স্বয়ংক্রিয়ভাবে পর্যবেক্ষিত সম্পত্তি থেকে নতুন এবং পুরানো মান পান।
- একজন পর্যবেক্ষকের সাথে আমরা ইনপুট হিসাবে অন্য কোনও মান পাস করতে পারি না।
Watchers vs. Computed Properties
পর্যবেক্ষক এবং গণনাকৃত বৈশিষ্ট্য উভয়ই ফাংশন হিসাবে লেখা হয়।
নির্ভরতা পরিবর্তিত হলে পর্যবেক্ষক এবং গণনাকৃত বৈশিষ্ট্য উভয়ই স্বয়ংক্রিয়ভাবে কল করা হয় এবং HTML থেকে কখনই কল করা হয় না।
এখানে কম্পিউটেড প্রোপার্টি এবং প্রহরীর মধ্যে কিছু পার্থক্য রয়েছে:
- পর্যবেক্ষকরা শুধুমাত্র একটি বৈশিষ্ট্যের উপর নির্ভর করে, যে বৈশিষ্ট্যটি তারা পর্যবেক্ষণ করতে সেট করা হয়েছে।
- গণনাকৃত বৈশিষ্ট্য অনেক বৈশিষ্ট্যের উপর নির্ভর করতে পারে।
- কম্পিউটেড প্রোপার্টি ডাটা প্রোপার্টি এর মত ব্যবহার করা হয় ব্যতীত তারা ডাইনামিক।
- প্রহরীদের HTML থেকে উল্লেখ করা হয় না।
Watchers
একটি নির্দিষ্ট বৈশিষ্ট্য মান পরিবর্তিত হলে শুধুমাত্র মৃত্যুদন্ড কার্যকর করা হয়
Computed Properties
কোনো নির্ভরতা পরিবর্তন স্বয়ংক্রিয়ভাবে পুনরায় গণনা করা হয়
Usage
এইচটিএমএল-এ প্রহরী ব্যবহার করা হয় না, গণনা করা বৈশিষ্ট্যগুলি ডেটা হিসাবে ব্যবহৃত হয়
Dependencies
যদিও পর্যবেক্ষকরা শুধুমাত্র একটি সম্পত্তির উপর নির্ভর করে, গণনা করা বৈশিষ্ট্য একাধিক বৈশিষ্ট্যের উপর নির্ভর করতে পারে
Vue Exercises
এই টিউটোরিয়ালের পর্যবেক্ষককে 'রেঞ্জভ্যাল' ডেটা প্রপার্টি পরিবর্তন করার সময় 'গণনা' ডেটা বৈশিষ্ট্য একটি করে বৃদ্ধি করা উচিত।
কিভাবে প্রহরী বলা উচিত?
Fill in the missing watcher name:
<script>
const app = Vue.createApp({
data() {
return {
rangeVal: 70,
count: 0
}
},
watch: {
______() {
this.count++
}
}
})
app.mount('#app')
</script>