بررسی computed ، methods و watcher در Vue3

methods- computed-watcher

در این مقاله ابتدا با بیان مثال به بررسی و تعریف methods ، computed و watcher میپردازیم و پس از آن شروع به مقایسه هر سه مورد می کنیم .

methods :

در instance ویو methods یک property است که در آن توابع به صورت key : value تعریف می شوند و ما با استفاده از آن می توانیم به data خود با استفاده از کلمه کلیدی this دسترسی داشته باشیم.

به این مثال توجه کنید :

Vue.createApp({

methods:{

sayHi(){

return 'hello'

}
}

}).mount("app");

در قسمت سند html به صورت زیر متد را صدا میزنیم :

 <div id="app">
{{sayHi()}}
<div/>

همانطور که مشاهده می کنید قرار گرفتن پرانتز برای متد ها مهم است به صورتی که بدون استفاده از پرانتز نتیجه نهایی خود تابع است و در صورت استفاده از پردانتز نتیجه نهایی در این مثال hello می باشد.

computed :

به مثال زیر توجه کنید :

const vm= Vue.createApp({
     data() {
         return {
            message:  'Hello world !'

         },

    computed: {

        reversedMessage(){

            return this.message.split('').reverse().join('')

        }
    }
}).mount(…)

تفاوت methods و computed :

همانطور که در مثال های بالا متوجه شدید از لحاظ ظاهر methods و computed تفاوتی باهم ندارند و از هر دو مورد می توان به صورت یکسان استفاده کرد اما تفاوت اصلی آن در بخش حافظه نهان است که وقتی متدی در computed تعریف می کنید فقط در صورت تغییر ، متد از اول اجرا می شود در واقع در مثال بالا تا زمانی که message تغیری نکند تابع reversedMessage اجرای مجددی ندارد.

ولی در methods جریان متفاوتی شکل میگیرد و در واقع با هر بار فراخوانی ، تابع از اول اجرا می شود و مانند computed حافظه نهانی وجود ندارد.

برای درک بهتر تفاوت methods و computed در vue به مثال زیر توجه کنید :

  <div id="app">
  <button @click="changeClick">click</button>
  <p>change : {{isChange()}}</p>
  <p>Name : {{upperCase()}}</p>
</div>

Vue.created({
data() {
    return {
        name : "",
        change:true
    }
},
methods: {
    upperCase(){
        console.log('upperCase')
        return  this.name = this.name.toUpperCase()
    },
    changeClick(){
        this.change = !this.change
    },
    isChange(){
        console.log('ischange')
        return this.change ? 'true' : "false"
    }
},
}).mount('app')

اگر کد بالا را در ادیتور خود اجرا کنید متوجه می شوید که با هر تغییری در ساختار صفحه ی ما دو تابع upperCase و isChange اجرا می شوند و در واقع هنگامی که یک تابع فراخوانی می شود سایر توابع موجود در پروپرتی methods نیز صدا زده می شوند ، در پروژه های بزرگ این اتفاق باعث مشکل در برنامه ما می شود برای رفع این مشکل ما از computed و Watcher استفاده می کنیم.

در مثال زیر از computed استفاده شده است :

  Vue.created({
data() {
    return {
        name : "",
        change:true
    }
},
computed :{
    isChange(){
        console.log('ischange')
        return this.change ? 'true' : "false"
    }
},
methods: {
    upperCase(){
        console.log('upperCase')
        return  this.name = this.name.toUpperCase()
    },
    changeClick(){
        this.change = !this.change
    }
}
}).mount('app')

در قسمت سند html نیازی به قرار دادن پرانتز هنگام صدا زدن توابع در computed نیست چون نحوه بر خورد ویو با این computed شبیه data است.

  <div id="app">
  <button @click="changeClick">click</button>
  <p>change : {{isChange}}</p>
  <p>Name : {{upperCase()}}</p>
</div>

اگر خروجی کد های بالا را در قسمت کنسول مرورگر خود مشاهده کنید متوجه می شوید تابع isChange فقط هنگامی اجرا می شود که خود آن صدا زده شود و تغییر کند ، در واقع هر بار رندر نمی شود پس computed مقدار را به اصطلاح cache یا ذخیره می کند.

computed بیشتر برای عملیات ریاضی ، محاسبات یا مقایسه استفاده می شوند.

Watcher :

Watch عملیات نظارت را انجام می دهند و زمانی استفاده می شوند که برخی از داده های ما وابسته به داده های دیگر باشند در واقع Watcher ها با نام watch زمانی استفاده می شوند که ما قصد داریم مقدار یک پراپرتی را زیر نظر داشته باشیم .

<div id="app">
    {{ counter }}
    <button @click="counter++">increase</button>
</div>

    const vm = Vue.createApp ({

    data(){
        counter: 0
    },
    watch: {
        counter(newValue, oldValue) {
            console.log(newValue);
        }
    }
}).mount(‘#app’)

باتغیر counter تابع watch فراخوانی می شود .

حتما باید نامی که در data هست و در Watcher نظارت می شود یکسان باشد.

مقایسه Watcher و computed :

باتوجه به مثال های که در مورد خصوصیت های این دو تابع برسی کردیم متوجه مفید بودن computed ها شدیم اما در پروژه های خود زمانی که نیاز به یک ناظر داشته باشیم تا تغیرات را دنبال کند از Watcher استفاده می کنیم .

در صورتی که درمورد فریم ورک vue.js سوالی دارید می توانید در انتهای همین مقاله یا قسمت پرسش و پاسخ سوالات خود را مطرح کنید.