Methods:主動觸發,且可以重複觸發

Methods 裡的 Function 通常會藉由一個「按鈕」之類的 Trigger 來啟用功能,把資料重新繪製到畫面上。

Computed:資料出現變化時改變畫面

Computed 不是透過 Trigger 觸發,而是當相關的計算資料出現變化時,會馬上透過 Function 改變畫面。

例如使用 Computed 過濾資料就不需要用一個按鈕去觸發 Method,可以直接去計算畫面的訊息,速度比較快。但如果資料量大,效能上可能會有影響。

Watch:監控特定資料變化

Watch 通常用於「監控」特定的變數,當變數產生變化時,可以執行特定的事件。

例如:按下按鈕 (trigger) 讓畫面產生變化,並觸發 Watch 裡面的事件。

範例:旋轉盒子

使用 trigger 來觸發旋轉 box,並在三秒後改變回來。

<div class="box" :class="{'rotate': trigger }"></div>
<button class="btn" @click="trigger = true">旋轉</button>
var app = new Vue({
    el: '#app',
    data: {
        // 被監控的變數 trigger
        trigger: false,
    }
    watch: {
        // 產生變化時,執行以下函式
        trigger: function(){
            let vm = this;
            // ES6 箭頭函式
            setTimeout(() => {
                vm.trigger = false;
            }, 3000);
        },
    },
});

按下按鈕後,按鈕的 @click="trigger = true" 成功觸發 box 的程式碼 :class="{'rotate': trigger }",讓 box 旋轉 45 度。

但是因為變數 trigger 產生變化,所以觸發了 Watch 裡面的事件,所以三秒後 Watch 就會將 trigger 改回 false,box 就會轉回來。

總結

  • Methods:需要「主動觸發」,且可以多次重複觸發
  • Computed:當「資料出現變化」時需要改變畫面的 Function 放這裡
  • Watch:「監控」特定資料變化的 Function 放這裡

其中,Computed 與 Watch 很像,因為都會隨著資料做變化,但是這兩種最大的差異在於「效能」。
而效能的主要差異就在於會不會調整資料:

  • Computed 是用來呈現在畫面上的 Function
  • Watch 則會變動其它資料

通常使用 Watch 的時候比較少,因為效能負擔較多。
Computed 若資料量不大,效能影響比較小,也常被拿來做各種動態計算的應用。

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫