$watch() ($watch())
متد $watch() یک «واچر (Watcher)» می سازد. واچر یعنی گوش دادن به تغییرات داده. سپس هنگام تغییر، یک کالبک اجرا می شود. این کار مثل مراقب کلاس است. هر وقت وضعیت عوض شد، خبر می دهد.
تعریف و کاربرد متد watch در Vue
$watch() یک منبع را مشاهده می کند و روی تغییر، کالبک را اجرا می کند. این متد یک تابع توقف برمی گرداند. با آن می توان واچر را خاموش کرد. گزینه های deep، immediate و flush هم وجود دارند. deep یعنی دنبال کردن تغییرات عمیق شیء. immediate یعنی اجرای فوری کالبک پس از ساخت واچر.
مثال 1: واچر ساده در mounted
هر بار value تغییر کند، یک پیام در لیست نتایج ثبت می شود.
<script>
export default {
mounted() {
this.$watch('value', function() {
this.results.push('$watch() method');
});
}
};
<\/script>
مثال 2: دریافت مقدار جدید و قبلی
با پارامترهای کالبک، مقدار جدید و قبلی را می گیریم و می نویسیم.
<script>
export default {
data() {
return {
value: 4,
results: []
};
},
mounted() {
this.$watch('value', function(newVal, oldVal) {
this.results.push('Old value: ' + oldVal + ', new value: ' + newVal);
});
}
};
<\/script>
مثال 3: گزینه های deep و immediate
با deep:true تغییرات داخل شیء هم دیده می شود. با immediate:true کالبک بلافاصله پس از ساخت اجرا می شود.
<script>
export default {
data() {
return {
value: {
owner: 'Stuart',
hobbies: ['Bird watching']
},
watchMessages: []
};
},
mounted() {
this.$watch('value', function(newVal, oldVal) {
this.watchMessages.push('watcher triggered');
}, {
deep: true,
immediate: false
});
}
};
<\/script>
گام های عملی
- منبع مشاهده را مشخص کن؛ مثلاً
'value'. - کالبک را بنویس و کاری انجام بده.
- در صورت نیاز، از تابع توقف استفاده کن.
نکته: مسیرهای نقطه ای مانند 'value.country' هم پشتیبانی می شوند. برای چند مقدار، یک تابع منبع بده.
لینک ها و ادامه مطالعه
برای زمان بندی رندر، $nextTick() را ببین. برای دسترسی به عناصر، $refs مفید است. همین طور صفحه واچرها در آموزش Vue را مطالعه کن.
جمع بندی سریع
$watch()تغییرات داده را رصد می کند.- تابع توقف برمی گرداند.
deepبرای تغییرات عمیق شیء است.immediateکالبک را فوری اجرا می کند.