vue計算屬性

模闆内的表達式是非常便利的，但是它們實際上隻用于簡單的運算。在模闆中放入太多的邏輯會讓模闆過重且難以維護。例如：

在這種情況下，模闆不再簡單和清晰。在意識到這是反向顯示 message 之前，你不得不再次确認第二遍。當你想要在模闆中多次反向顯示 message 的時候，問題會變得更糟糕

這就是對于任何複雜邏輯都應當使用計算屬性的原因

這裡我們聲明了一個計算屬性 reversedmessage 。我們提供的函數将用作屬性 vm.reversedmessage 的 getter

vm.reversedmessage 的值始終取決于 vm.message 的值。是以當 vm.message 發生改變時，所有依賴于 vm.reversedmessage 的綁定也會更新。而且最妙的是我們已經以聲明的方式建立了這種依賴關系：計算屬性的 getter 是沒有副作用，這使得它易于測試和推理

我們可以将同一函數定義為一個 method 而不是一個計算屬性。對于最終的結果，兩種方式确實是相同的。然而，不同的是計算屬性是基于它們的依賴進行緩存的。計算屬性隻有在它的相關依賴發生改變時才會重新求值。這就意味着隻要 message 還沒有發生改變，多次通路 reversedmessage 計算屬性會立即傳回之前的計算結果，而不必再次執行函數

這也同樣意味着如果把reversemessage付給一個click事件，在computed方法中，多次點選隻變換一次順序。相比而言，隻要發生重新渲染，method 調用總會執行該函數

我們為什麼需要緩存？假設我們有一個性能開銷比較大的的計算屬性 a ，它需要周遊一個極大的數組和做大量的計算。然後我們可能有其他的計算屬性依賴于 a 。如果沒有緩存，我們将不可避免的多次執行 a 的 getter！如果你不希望有緩存，請用 method 替代

vue 确實提供了一種更通用的方式來觀察和響應 vue 執行個體上的資料變動：watch 屬性。當你有一些資料需要随着其它資料變動而變動時，你很容易濫用 watch——特别是如果你之前使用過 angularjs。然而，通常更好的想法是使用 computed 屬性而不是指令式的 watch 回調。細想一下這個例子：

上面代碼是指令式的和重複的。将它與 computed 屬性的版本進行比較：

計算屬性預設隻有 getter ，不過在需要時你也可以提供一個 setter ：

現在在運作 vm.fullname = 'john doe' 時， setter 會被調用， vm.firstname 和 vm.lastname 也相應地會被更新

雖然計算屬性在大多數情況下更合适，但有時也需要一個自定義的 watcher 。這是為什麼 vue 提供一個更通用的方法通過 watch 選項，來響應資料的變化。當你想要在資料變化響應時，執行異步操作或開銷較大的操作，這是很有用的

使用 watch 選項允許我們執行異步操作（通路一個 api），限制我們執行該操作的頻率，并在我們得到最終結果前，設定中間狀态。這是計算屬性無法做到的。

除了 watch 選項之外，您還可以使用 vm.$watch api 指令