واچرها (Watchers)
«واچر (Watcher)» یعنی نگهبان یک «خاصیت داده (Data Property)». هر وقت مقدارش عوض شود، واچر خودکار اجرا می شود و کاری انجام می دهد؛ مثل زنگ هشدار مدرسه.
مفهوم واچر و جایگاهش
مثل data و methods و computed، بخش رزروشده watch داریم. در آن، برای هر خاصیت داده، متدی همنام می نویسیم تا تغییراتش را بگیرد.
const app = Vue.createApp({
data() {
return {
// ...
};
},
watch: {
// ...
},
computed: {
// ...
},
methods: {
// ...
}
});
نکته: واچر را هرگز مستقیم صدا نمی زنیم. فقط با تغییر مقدار اجرا می شود.
نمونه: جلوگیری از بازه غیرمجاز
با اسلایدر مقدار rangeVal را عوض می کنیم. واچر اجازه 20 تا 60 را نمی دهد.
<input type="range" v-model="rangeVal">
<p>{{ rangeVal }}<\/p>
<script>
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;
}
}
}
}
});
<\/script>
دسترسی به مقدار جدید و قبلی
واچر دو آرگومان می گیرد: مقدار جدید و مقدار قبلی. پس می توانیم اختلاف را حساب کنیم.
<div v-on:click="updatePos"><\/div>
<p>{{ xDiff }}<\/p>
<script>
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;
}
}
});
<\/script>
بازخورد لحظه ای اعتبار ورودی
ایمیل را نگاه می کنیم. اگر @ اضافه شد و قبلاً نبود، پیام «درست شد!» می دهیم.
<input type="email" v-model="inpAddress">
<p v-bind:class="myClass">{{ feedbackText }}<\/p>
<script>
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 :)';
}
}
}
});
<\/script>
واچرها در برابر متدها و computed
متدها با رویداد صدا می خورند. واچرها خودکار با تغییر داده اجرا می شوند. computed خروجی پویا مثل داده می دهد؛ اما واچر «اقدام» انجام می دهد.
گام های عملی
- خاصیت داده را تعریف کن. مثال:
rangeVal. - در
watch، متد همنام آن خاصیت بساز. - درون واچر، منطق واکنش را پیاده کن.
جمع بندی سریع
- واچر نگهبان تغییرات داده است.
- خودکار و واکنشی اجرا می شود.
- دو آرگومان می گیرد: جدید و قبلی.
- برای اعتبارسنجی و همگام سازی عالی است.
ادامه مسیر: ویژگی های محاسبه شده برای خروجی پویا؛ و قالب ها برای سازمان دهی نما. همچنین واچر Vue را به عنوان مرجع نگه دار.