HAPPY LIFE AND cODING

vue – watch 和 computed 和 methods

vue – watch 和 computed 和 methods

watch 和 computed 和 methods 在vue 中,其實常常會用到。基本運用大家都知道,但三者之間,什麼場景,該用哪個?以及效能問題,在這邊我想記錄下來,分別做個比較和結論,來加深自己的印象。

一個最最基本例子來說,我想在畫面上打印出我的全名 Hsieh jessica,我們會這樣寫:

<template>
    <div class="main">
        <div> 我的名子: {{firstName}} - {{lastName}} </div>
    </div>
</template>
<script>
export default {
     data(){
        return{
             firstName: 'Hsieh',
             lastName:'jessica',  
        }
    },
}
</script>

我相信,這是小白都會用的做法,是一個很直覺的寫法。那我們來看一下 watch 怎麼寫

watch

<template>
     <div class="main">
         <div> 我的名子(使用 watch) : {{watchfullName}} </div>
     </div>
</template>

<script>
export default {
   data(){
        return{
            firstName: 'Hsieh',
            lastName:'jessica',
            watchfullName:'',
        }
    },
    watch:{
        firstName:{
            handler:function (newVal,oldVal) {
                this.watchfullName = newVal + ' ' + this.lastName;
            }, 
            immediate:true
        },
        lastName:{
            handler:function (newVal,oldVal) {
                this.watchfullName = this.firstName + ' ' + newVal;
            }, 
            immediate:true
        }
}
</script>

watch 的寫法,似乎就比較囉嗦,我們必須監聽 2個 data中的屬性 firstName 和 lastName,一但這2個值有改變,就會更動 data中 的 watchfullName,然後在顯示畫面上。

computed

<template>
    <div class="main">
        <div> 我的名子(使用 computed) : {{fullName}} </div>
     </div>
</template>

<script>
export default {
    data(){
        return{
            firstName: 'Hsieh',
            lastName:'jessica',
        }
    },
    computed:{
        fullName(){
            return  this.firstName +  this.lastName ;
        }
    }
}
</script>

挺直覺的,直接把data中的 firstName 和 lastName 運算完,並直接用fullName,顯示在畫面上。來看最後一個methods

methods

<template>
    <div class="main">
        <div> 我的名子(使用 methods) : {{allName(firstName,lastName)}} </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            firstName: 'Hsieh',
            lastName:'jessica',
        }
    },
    methods:{
        allName(firstName,lastName){
            return  firstName +  lastName;
        }
    },
}
</script>

寫了這三段,看起來沒毛病阿,都可以用阿,並且都達到我們要的效果 ! 是阿!但重點是我們要比較下結論壓~~

methods 和 computed 比較

當 computed 依賴於 data 的值沒改變時,是實上 computed 就不會被觸發。有緩存作用。

methods 不管是否有無依賴 data 中的值,都會一直被觸發。因此,效能會比 computed 低。

watch 和 computed 比較

基本上,此2者用起來差不多,但我們可以這樣想

如果監聽 多個 data 變數,產生 一個 結果 => 使用computed(常用於搜尋功能)

如果監聽 一個 data 變數,產生 多個 結果 => 使用 watch