Vue.js 的內聯表達式非常方便，但它最合適的使用場景是簡單的布爾操作或字符串拼接。如果涉及更復雜的邏輯，你應該使用計算屬性。
在 Vue.js 中，你可以通過 computed 選項定義計算屬性：
~~~
var demo = new Vue({
data: {
firstName: 'Foo',
lastName: 'Bar'
},
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]
}
}
}
})
demo.fullName // 'Foo Bar'
當你只需要 getter 的時候，你可以直接提供一個函數：
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
~~~
一個計算屬性本質上是一個被 getter/setter 函數定義了的屬性。計算屬性使用起來和一般屬性一樣，只是在訪問它的時候，你會得到 getter 函數返回的值，改變它的時候，你會觸發 setter 函數，新值將會作為 setter 的參數被傳入。
在 0.12.8 之前，計算屬性僅僅體現為一個取值的行為 —— 每次你訪問它的時候，getter 都會重新求值。在 0.12.8 中對此做了改進 —— 計算屬性的值會被緩存，只有在需要時才會重新計算。
