1. 程式人生 > >vue中的methods、computed和watch

vue中的methods、computed和watch

1、computed屬性:

經過處理返回的資料值,只要源資料沒有發生改變,computed函式裡面對相應的資料就不會反生改變,相當於快取在本地;發生改變的時候,computed對應資料的函式才會發生改變。

2、computed屬性和methods屬性:

你可能已經注意到我們可以通過呼叫method來達到同樣的效果:我們可以將同一個函式定義為一個method而不是一個計算屬性,對於最終的結果,兩種方式確實是相同的,


    然而,計算屬性是基於他們的依賴就行快取的,計算屬性只有在它相關的依賴發生改變時才會重新求值,這意味著只要message 還沒有發生改變,多次訪問reversedMessage計算屬性會立刻返回之前計劃算的結果,而不必再次執行函式.這也同樣意味著下面的計算屬性將不再更新,

相比而言,只要發生重新渲染,method呼叫總會執行該函式;
我們為什麼需要快取?假設我們有一個性能開銷比較大的計劃屬性A,
它需要便利一個極大的陣列和做很大量的計算,然後我們可能尤其他的計算屬性依賴A,
如果沒有快取,我們將不可避免的多次執行A的geteer,如果你不希望有快取,請用methods代替;
因為Date.now()不是響應式依賴;

3、computed屬性與watch屬性:

vue確實提供了一種更通用的一種方式來觀察和響應Vue例項上的資料變動:watch屬性;當你有一些資料需要隨著其他資料進行便動,你會很容易濫用watch--特別是你之前使用過AngularJS.然後,通常更好的想法就是使用computed屬性而不是命令式的watch回撥。

原文地址:https://segmentfault.com/a/1190000012708275