computed VS watch
先來看官網中對計算屬性（computed）的解釋：
模板內的表達式非常便利，但是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。
詳情見官網URL
官網中對偵聽器（watch）的解釋：
雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器。這就是為什麼 Vue 通過 watch 選項提供了一個更通用的方法，來響應數據的變化。當需要在數據變化時執行異步或開銷較大的操作時，這個方式是最有用的。
詳情見官網URL
引用vue官網的例子，如下：
用computed寫
用watch寫
兩種方法實現的效果是相同的，但是computed寫法更為簡單。
Computed
在頁面中使用大量或是複雜的表達式去處理數據，對頁面的維護會有很大的影響。這個時候就需要用到computed 計算屬性來處理複雜的邏輯運算。
computed 計算屬性只有在相關的數據發生變化時才會改變要計算的屬性，當相關數據沒有變化是，它會讀取緩存。
【注】計算屬性默認不能直接進行修改。
watch模式沒有computed模式簡單，但watch比較適合做異步的操作。
如下的例子，用watch可以實現2s後更改數據。而這種效果用computed不能實現，因為computed不適合做異步操作。
computed VS methods
官網中的對計算屬性（computed）緩存和方法(methods)的解釋：
我們可以將同一函數定義為一個方法而不是一個計算屬性。兩種方式的最終結果確實是完全相同的。然而，不同的是計算屬性是基於它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時才會重新求值。
詳情見官網URL
如下示例：
這二種方式返回的結果是一樣的，寫但在法上computed計算屬性的方式在用屬性時不用加(),而methods方式在使用時要像方法一樣去用，必須加()。
兩種方式在緩存上也大有不同，利用computed計算屬性是將 reverseMessage與message綁定，只有當message發生變化時才會觸發reverseMessage，而methods方式是每次進入頁面都要執行該方法，但是在利用實時信息時，比如顯示當前進入頁面的時間，必須用methods方式。
總結：computed是在HTML DOM加載後馬上執行的，如賦值；
methods則必須要有一定的觸發條件才能執行，如點擊事件；
watch用於觀察Vue實例上的數據變動。對應一個對象，鍵是觀察表達式，值是對應回調。
感謝閱讀，此分享若有錯誤請回復指正。
閱讀更多 千鋒H5 的文章
