Vue.js教程之計算屬性

Vue.js 的內聯表達式非常方便，但它最適合的使用場景是簡單的布林操作或字串拼接。如果涉及更複雜的邏輯，你應該使用計算屬性。

計算屬性是用來聲明式的描述一個值依賴了其它的值。當你在模板裡把資料綁定到一個計算屬性上時，Vue 會在其依賴的任何值導致該計算屬性改變時更新 DOM。這個功能非常強大，它可以讓你的程式碼更加聲明式、數據驅動且易於維護。

通常情況下，使用計算屬性會比使用過程式的$watch回呼更合適。例如下面的範例：

<div id="demo">{{fullName}}</div>
var vm = new Vue({
data: {
firstName: &#39;Foo&#39;,
lastName: &#39;Bar&#39;,
fullName: &#39;Foo Bar&#39;
}
})
vm.$watch(&#39;firstName&#39;, function (val) {
this.fullName = val + &#39; &#39; + this.lastName
})
vm.$watch(&#39;lastName&#39;, function (val) {
this.fullName = this.firstName + &#39; &#39; + val
})

   

上面的程式碼是過程式的，而且比較笨重。比較一下計算屬性的版本：

var vm = new Vue({
el:'#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})

   

是不是感覺好多了？另外，你也可以為計算屬性提供一個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]
}
}
}

   

計算屬性快取

在0.12.8 之前，計算屬性只體現為一個取值的行為－ 每次你存取它的時候， getter 都會重新求值。在 0.12.8 中對此做了改進 —— 計算屬性的值會被緩存，只有在其某個反應依賴改變才會重新計算。

設想我們有一個開銷很大的計算屬性 A，它需要循環一個大數組並且完成很多運算。而我們還有一個依賴 A 的計算屬性。如果沒有緩存，我們對 A 的 getter 不必要的過度調用就會導致潛在的效能問題。而有了緩存，A 的值會被緩存起來，除非其依賴發生了變化，這樣訪問它再多次也不會導致大量的不必要運算了。

然而，我們還是應該理解什麼會被視為「反應式依賴」：

var vm = new Vue({
data: {
msg: 'hi'
},
computed: {
example: {
return Date.now() + this.msg
}
}
})

   

在上面的例子中，計算屬性依賴 vm.msg。因為這是一個在 Vue 實例中被觀察到的資料屬性，那麼它就被視為了一個反應式依賴。無論何時 vm.msg 改變，vm.example 的值都會被重新計算。
然而，Date.now()並不是反應式依賴，因為它沒有和 Vue 的資料觀察系統有任何關係。因此，當你在程式中存取vm.example時，你會發現除非vm.msg觸發了一次重新計算，否則時間戳記始終是相同的值。

有的時候你需要保留簡單取得資料的模式，每次你造訪 vm.example 的時候都希望觸發重新計算。從 0.12.11 開始，你可以為一個特殊的計算屬性開關快取支援：

computed: {
example: {
cache: false,
get: function () {
return Date.now() + this.msg
}
}
}

   

現在，每次你造訪 vm.example 的時候，時間戳都會及時更新。然而，要注意這只發生在 JavaScript 程式內部存取的時候，資料綁定還是依賴驅動的。當你在模板中綁定一個 {{example}} 的計算屬性時，DOM 只會在反應式依賴改變時才會更新。