Vue.js 的內(nèi)聯(lián)表達(dá)式非常方便，但它最合適的使用場(chǎng)景是簡(jiǎn)單的布爾操作或字符串拼接。如果涉及更復(fù)雜的邏輯，你應(yīng)該使用計(jì)算屬性。

在 Vue.js 中，你可以通過(guò) computed 選項(xiàng)定義計(jì)算屬性：

var demo = new Vue({
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: {
      // getter 應(yīng)返回計(jì)算后的值
      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'

當(dāng)你只需要 getter 的時(shí)候，你可以直接提供一個(gè)函數(shù)：

computed: {
  fullName: function () {
    return this.firstName + ' ' + this.lastName 
  }    
}

一個(gè)計(jì)算屬性本質(zhì)上是一個(gè)被 getter/setter 函數(shù)定義了的屬性。計(jì)算屬性使用起來(lái)和一般屬性一樣，只是在訪問(wèn)它的時(shí)候，你會(huì)得到 getter 函數(shù)返回的值，改變它的時(shí)候，你會(huì)觸發(fā) setter 函數(shù)，新值將會(huì)作為 setter 的參數(shù)被傳入。

在 0.12.8 之前，計(jì)算屬性僅僅體現(xiàn)為一個(gè)取值的行為 —— 每次你訪問(wèn)它的時(shí)候，getter 都會(huì)重新求值。在 0.12.8 中對(duì)此做了改進(jìn) —— 計(jì)算屬性的值會(huì)被緩存，只有在需要時(shí)才會(huì)重新計(jì)算。

接下來(lái)，讓我們學(xué)習(xí)一下如何編寫自定義指令。