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