一. 計算屬性
<p> {{ message.split(' ') . reverse( ) . join(' ') }} </p>
對于任何復雜邏輯,我們都應該使用計算屬性
在瀏覽器的控制臺中改變vm.message的值,相應的vm.reversedMessage的返回值就會改變
你可以像綁定普通屬性一樣在模板中綁定計算屬性。Vue 知道vm.reversedMessage依賴于vm.message,因此當vm.message發生改變時,所有依賴于vm.reversedMessage的綁定也會更新。而且最妙的是我們已經以聲明的方式創建了這種依賴關系:計算屬性的 getter 函數是沒有連帶影響 (side effect),這使得它易于測試和推理。
二. 計算屬性的緩存VS方法
我們也可以在表達式中調用方法來達到同樣的效果
重點:? 我們可以將同一函數定義為一個方法而不是一個計算屬性。對于最終的結果,兩種方式確實是相同的。然而,不同的是計算屬性是基于它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時才會重新求值。這就意味著只要message還沒有發生改變,多次訪問reversedMessage計算屬性會立即返回之前的計算結果,而不必再次執行函數。
三. ?計算屬性 VS 被觀察的屬性
Vue 確實提供了一種更通用的方式來觀察和響應 Vue 實例上的數據變動:watch 屬性。當你有一些數據需要隨著其它數據變動而變動時,你很容易濫用watch——特別是如果你之前使用過 AngularJS。然而,通常更好的想法是使用計算屬性而不是命令式的watch回調。細想一下這個例子:
四. 計算屬性的setter
計算屬性中默認只有getter方法,不過需要時也可以添加setter方法
五. 觀察者
雖然計算屬性在大多數情況下更合適,但有時也需要一個自定義的 watcher。這是為什么 Vue 通過watch選項提供一個更通用的方法,來響應數據的變化。當你想要在數據變化響應時,執行異步操作或開銷較大的操作,這是很有用的。
在這個示例中,使用watch選項允許我們執行異步操作 (訪問一個 API),限制我們執行該操作的頻率,并在我們得到最終結果前,設置中間狀態。這是計算屬性無法做到的。
除了watch選項之外,您還可以使用vm.$watch API命令。