Vue中computed VS watch 區別 及computed VS method區別

computed VS watch

先來看官網中對計算屬性（computed）的解釋：

模板內的表示式非常便利，但是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。

詳情見官網URL

https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7

官網中對偵聽器（watch）的解釋：

雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器。這就是為什麼 Vue 通過 watch 選項提供了一個更通用的方法，來響應資料的變化。當需要在資料變化時執行非同步或開銷較大的操作時，這個方式是最有用的。

詳情見官網URL

https://cn.vuejs.org/v2/guide/computed.html#%E4%BE%A6%E5%90%AC%E5%99%A8

引用vue官網的例子，如下：

用computed寫

用watch寫

兩種方法實現的效果是相同的，但是computed寫法更為簡單。

Computed

在頁面中使用大量或是複雜的表示式去處理資料，對頁面的維護會有很大的影響。這個時候就需要用到computed 計算屬性來處理複雜的邏輯運算。

computed 計算屬性只有在相關的資料發生變化時才會改變要計算的屬性，當相關資料沒有變化是，它會讀取快取。

【注】計算屬性預設不能直接進行修改。

watch模式沒有computed模式簡單，但watch比較適合做非同步的操作。

如下的例子，用watch可以實現2s後更改資料。而這種效果用computed不能實現，因為computed不適合做非同步操作。

computed VS methods

官網中的對計算屬性（computed）快取和方法(methods)的解釋：

我們可以將同一函式定義為一個方法而不是一個計算屬性。兩種方式的最終結果確實是完全相同的。然而，不同的是計算屬性是基於它們的依賴進行快取的。計算屬性只有在它的相關依賴發生改變時才會重新求值。

詳情見官網URL

https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%BC%93%E5%AD%98-vs-%E6%96%B9%E6%B3%95

如下示例：

這二種方式返回的結果是一樣的，寫但在法上computed計算屬性的方式在用屬性時不用加(),而methods方式在使用時要像方法一樣去用，必須加()。

兩種方式在快取上也大有不同，利用computed計算屬性是將 reverseMessage與message繫結，只有當message發生變化時才會觸發reverseMessage，而methods方式是每次進入頁面都要執行該方法，但是在利用實時資訊時，比如顯示當前進入頁面的時間，必須用methods方式。

總結：computed是在HTML DOM載入後馬上執行的，如賦值；

methods則必須要有一定的觸發條件才能執行，如點選事件；

watch用於觀察Vue例項上的資料變動。對應一個物件，鍵是觀察表示式，值是對應回撥。

感謝閱讀，此分享若有錯誤請回復指正。