watch (watch)
اینجا درباره «watch» حرف می زنیم. «واچر (Watcher)» یعنی نگهبان داده ها. وقتی مقدار عوض شود، نگهبان بیدار می شود و کاری انجام می دهد.
تعریف «watch» و زمان استفاده
گزینه «watch» یک شیء از واچرهاست. هر واچر هم نامِ یک «داده (data)» یا «محاسبه شده (computed)» است.
وقتی آن ویژگی تغییر کند، تابع واچر خودکار اجرا می شود. آرگومان ها، مقدار جدید و قبلی هستند.
می توان مسیر نقطه ای نوشت؛ مثل tiger.weight. این گونه فقط تغییر وزن رصد می شود.
نمونه کد: جلوگیری از بازه 20 تا 70
<template>
<div>
<input type="range" v-model="rangeVal">
<p>rangeVal: {{ rangeVal }}</p>
</div>
</template>
<script>
export default {
data() {
return {
rangeVal: 4
};
},
watch: {
rangeVal(val) {
if (val > 20 && val < 70) {
if (val < 40) {
this.rangeVal = 20;
}
else {
this.rangeVal = 70;
}
}
}
}
};
<\/script>
نمونه کد: نوشتن واچر با شیء و اجرای فوری
<template>
<div>
<h2>Example watch Option</h2>
<p>با immediate: true، مقدار ابتدا به 70 تنظیم می شود.</p>
<input type="range" v-model="rangeVal">
<p>rangeVal: <span>{{ rangeVal }}</span></p>
</div>
</template>
<script>
export default {
data() {
return {
rangeVal: 40
};
},
watch: {
rangeVal: {
handler(val) {
if (val > 20 && val < 70) {
if (val < 40) {
this.rangeVal = 20;
}
else {
this.rangeVal = 70;
}
}
},
immediate: true
}
}
};
<\/script>
<style>
span {
padding: 3px;
font-weight: bold;
font-family: 'Courier New', Courier, monospace;
background-color: lightgreen;
}
<\/style>
گام های عملی برای راه اندازی watch
- ویژگی هدف را در data یا computed مشخص کن.
- در شیء watch، تابع هم نام آن ویژگی بنویس.
- داخل تابع، منطق واکنش به تغییر را پیاده کن.
نکته: برای رصد آبجکت های تو در تو، از مسیر نقطه ای استفاده کن.
هشدار: از «Arrow Function» در واچرها پرهیز کن. this به نمونه وصل نمی شود.
جمع بندی سریع
- watch نگهبان تغییرات داده هاست.
- به مقدار جدید و قدیم دسترسی داری.
- مسیر نقطه ای تغییر بخش خاص را می گیرد.
- immediate اجرا را همان اول فعال می کند.
برای آشنایی های مرتبط ببین: محاسبه شده ها و متدها. همچنین داده ها در data تعریف می شوند.
منابع بیشتر: مرجع watch، Vue Watchers، متد $watch().