سلام دوستان. گاها توی برنامه شرایطی پیش میاد که ما لازم داریم مقدار یک پراپرتی رو رصد کنیم تا یه سری عملیات رو انجام بدیم. مثلا توی برنامه یک شمارنده (Counter) داریم و می‌خوایم زمانی که مقدار این شمارنده به یک سقف مشخص رسید، یک پیام به کاربر پیام بدیم. توی چنین شرایطی بهترین کار استفاده از watcher هاست. می‌تونیم برای شمارنده یک watcher تعریف کنیم. هر موقع که مقدار شمارنده تغییر می‌کنه watcher نسبت داده شده که یک تابع هست اجرا میشه. watcher ها رو توی نمونه بصورت زیر تعریف می‌کنیم:

const app = new Vue({
    el: '#app',
    data: {
        counter: 0
    },
    watch: {
        counter: function(newValue, oldValue) {
            console.log(newValue);
        }
    }
});

توی data یک پراپرتی وجود داره به اسم counter که watcher مربوط به اون هم باید به همین نام باشه. ما watcher ها رو توی نمونه و داخل یک پراپرتی به اسم watch تعریف می‌کنیم. هر watcher به صورت یک تابع هست که دو تا پارامتر داره. مقدار پارامتر اول شامل مقدار جدید پراپرتی و مقدار پارامتر دوم مقدار قبل از تغییر پراپرتی هست.

حالا وقتی که توی برنامه مقدار پراپرتی counter تغییر کنه، watcher ـی که نوشتیم اجرا میشه:

<div id="app">
    {{ counter }}
    <button v-on:click="counter++">Press, press on me</button>
</div>

هر بار که روی دکمه کلیک می‌کنیم مقدار counter عوض و در نتیجه watcher مربوط به اون هم اجرا میشه (کد بالا یک آنتی‌پترن داره که آخر پست بهش اشاره می‌کنم 😉)

اگه بخوایم یک پراپرتی Nested مثل foo.bar.baz رو رصد کنیم از روش زیر استفاده می‌کنیم:

const app = new Vue({
    data: {
        foo: { bar: { baz: 0 } }
    },
    watch: {
        'foo.bar.baz': function(newValue, oldValue) {
            if (newValue > 5) {
                alert('Want more?');
            }
        }
    }
});

 و همچنین اگه از روتر استفاده می‌کنیم و می‌خوایم تغییرات یک پارامتر روت مثلا id رو رصد کنیم از کد زیر استفاده می‌کنیم:

watch: {
    '$route.params.id': function (id) {
        // this.idChanged();
    }
}

 

شاید این سوال پیش اومده باشه که توی چنین شرایطی میشد از method ها هم استفاده کرد. پس watcher به چه دردی می‌خوره؟ 🤔

متدها کاربرد عمومی‌تری دارن. یک متد، یک تابع و یا بطور کلی یک عملکرد توی برنامه هست که می‌تونه توی همه جای برنامه (قسمت View، پراپرتی‌های computed و حتی توی watcher) استفاده بشه.

اما watcher کاربرد مشخص‌تر و محدودتری داره و برای زمانی استفاده میشه که ما می‌خوایم مقدار یک پراپرتی رو رصد کنیم و یک سری عملیات انجام بدیم که توی بعضی از موارد این کار رو نمیشه با متدها انجام داد. مثلا توی یک کامپوننت اگه یک سری اطلاعات از بیرون با props پاس داده بشه و اگه بخوایم تغییرات props رو رصد کنیم فقط watcher هست که به کار ما میاد.

 

نکته: توی این کد v-on:click="counter++" یک آنتی‌پترن هست. یعنی نباید به این شکل مقدار دیتا رو تغییر بدیم. طبق الگوی MVVM قسمت ویوومدل باید مسئول تغییر دادن اطلاعات مدل باشه. توی این مثال برای تغییر دادن counter باید توی ویوومدل یک متد درست کنیم.

 

خب این قسمت هم به پایان رسید. قسمت‌های بعدی هم زود منتشر میشه. روزتون خوش. 😉 🖐️

منابعی که برای این پست استفاده کردم: