computed VS watchhtml
先來看官網中對計算屬性(computed)的解釋:vue
模板內的表達式很是便利,可是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板太重且難以維護。緩存
詳情見官網URL異步
https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7ide
官網中對偵聽器(watch)的解釋:函數
雖然計算屬性在大多數狀況下更合適,但有時也須要一個自定義的偵聽器。這就是爲何 Vue 經過 watch 選項提供了一個更通用的方法,來響應數據的變化。當須要在數據變化時執行異步或開銷較大的操做時,這個方式是最有用的。ui
詳情見官網URL設計
引用vue官網的例子,以下:3d
用computed寫htm
用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實例上的數據變更。對應一個對象,鍵是觀察表達式,值是對應回調。
感謝閱讀,此分享如有錯誤請回復指正。