計算屬性
computed

計算快取 vs Methods

Original message: "{{ message }}"

Computed reversed message: "{{ reversedMessage }}"

複製程式碼
var vm = new Vue({
el: ‘#example’,
data: {
message: ‘Hello’
},
computed: {
// a computed getter
reversedMessage: function () {
// this points to the vm instance
return this.message.split(’’).reverse().join(’’)
}
}
})
複製程式碼
這裡我們聲明瞭一個計算屬性reverseMessage。我們提供的函式將用作屬性vm.reversedMessage 的getter。

你可以像繫結普通屬性一樣在模板中繫結計算屬性。Vue知道vm.reversedMessage 依賴於vm.message,因此當

vm.message 發生改變時，所有依賴於vm.reversedMessage的繫結也會更新。而且最妙的是我們已經以宣告的方式

建立了這種依賴關係：計算屬性的getter是沒有副作用，這使得它易於測試和推理。

計算快取 vs Methods
我們可以將同一個函式定義為一個method而不是一個計算屬性。對於最終的結果，兩種方式確實是相同的。然而，不同的是計算屬性是基於

他們的依賴進行快取的。計算屬性只有在它的相關依賴發生改變時才會重新求值。這就意味著只要它的依賴message沒有發生改變，多次訪問

veversedMessage計算屬性會立即返回之前的計算結果，而不必再次執行函式。

相比而言，只要發生重新渲染，method呼叫總會執行該函式。

我們為什麼需要快取？假設我們有一個性能開銷比較大的的計算屬性 A ，它需要遍歷一個極大的陣列和做大量的計算。然後我們可能有其他的計算屬性依賴於 A 。如果沒有快取，我們將不可避免的多次執行 A 的 getter！如果你不希望有快取，請用 method 替代。

Vue 確實提供了一種更通用的方式來觀察和響應 Vue 例項上的資料變動：watch 屬性。當你有一些資料需要隨著其它資料變動而變動時，你很容易濫用 watch——特別是如果你之前使用過 AngularJS。然而，通常更好的想法是使用 computed 屬性而不是命令式的 watch 回撥。細想一下這個例子：

computed屬性 vs watched 屬性

複製程式碼
var vm = new Vue({
el: ‘#demo’,
data: {
firstName: ‘Foo’,
lastName: ‘Bar’,
fullName: ‘Foo Bar’
},
watch: {
firstName: function (val) {
this.fullName = val + ’ ’ + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ’ ’ + val
}
}
})
複製程式碼
上面程式碼是命令式的和重複的。將它與 computed 屬性的版本進行比較：

複製程式碼
var vm = new Vue({
el: ‘#demo’,
data: {
firstName: ‘Foo’,
lastName: ‘Bar’
},
computed: {
fullName: function () {
return this.firstName + ’ ’ + this.lastName
}
}
})
複製程式碼
計算 setter
計算屬性預設只有 getter ，不過在需要時你也可以提供一個 setter ：

複製程式碼
// …
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ’ ’ + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(’ ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// …
複製程式碼
現在在執行 vm.fullName = ‘John Doe’ 時， setter 會被呼叫， vm.firstName 和 vm.lastName 也相應地會被更新