快應用 計算屬性

了解計算屬性，學會如何使用計算屬性

通過本節(jié)，你將學會：

• 計算屬性的基本使用
• 設(shè)置計算屬性 setter 函數(shù)
• 計算屬性的緩存

計算屬性的基本使用

我們經(jīng)常會在模版內(nèi)使用表達式，合理使用表達式可以提升我們的開發(fā)效率。但是在模板中放入太多的邏輯會讓模板過重且難以維護。例如：

<text> {{ message.split('').reverse().join('') }} </text>

在這個地方，模板不再是簡單的聲明式邏輯。如果我們在很多地方用上這樣的表達式，有可能讓模版的可讀性降低，并且重復使用同一表達式邏輯會讓代碼變得冗余，不易維護。對此，我們可以使用計算屬性：

<div>
  <text>Original message: "{{ message }}"</text>
  <text>Comtextuted reversed message: "{{ reversedMessage }}"</text>
</div>

export default {
  data: {
    message: 'Hello'
  },
  computed: {
    // 計算屬性的 getter
    reversedMessage() {
      // `this` 指向 vm 實例
      return this.message.split('').reverse().join('')
    }
  },
  onReady() {
    console.log(this.reversedMessage) // olleH

    this.message = 'Goodbye'

    console.log(this.reversedMessage) // eybdooG
  }
}

這里我們聲明了一個計算屬性? reversedMessage?。我們提供的函數(shù)將用作屬性 ?vm.reversedMessage? 的 getter 函數(shù)，這時 ?vm.reversedMessage? 的值始終取決于 ?vm.message? 的值。

你可以像綁定普通屬性一樣在模板中綁定計算屬性。組件實例知道? vm.reversedMessage? 依賴于 ?vm.message?，因此當 ?vm.message? 發(fā)生改變時，所有依賴 ?vm.reversedMessage? 的綁定也會更新。

設(shè)置計算屬性 setter 函數(shù)

計算屬性默認只有 getter ，不過在需要時你也可以提供一個 setter ：

export default {
  data: {
    firstName: 'Quick',
    lastName: 'App'
  },
  computed: {
    fullName: {
      get() {
        return `${this.firstName} ${this.lastName}`
      },
      set(value) {
        const names = value.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  },
  onReady() {
    console.log(this.fullName) // Quick App
    this.fullName = 'John Doe'
    console.log(this.firstName) // John
    console.log(this.lastName) // Doe
  }
}

計算屬性的緩存

你可能已經(jīng)注意到我們可以通過在表達式中調(diào)用方法來達到同樣的效果：

<text>Reversed message: "{{ reversedMessage() }}"</text>

// 在組件中
export default {
  data: {
    message: 'Hello'
  },
  reversedMessage () {
    return this.message.split('').reverse().join('')
  }
}

我們可以將同一函數(shù)定義為一個方法而不是一個計算屬性。兩種方式的最終結(jié)果確實是完全相同的。然而，不同的是計算屬性是基于它們的依賴進行緩存的。只在相關(guān)依賴發(fā)生改變時它們才會重新求值。這就意味著只要 ?message? 還沒有發(fā)生改變，多次訪問 ?reversedMessage? 計算屬性會立即返回之前的計算結(jié)果，而不必再次執(zhí)行函數(shù)。

這也同樣意味著下面的計算屬性將不再更新，因為 ?Date.now()? 不是響應式依賴：

computed: {
  now () {
    return Date.now()
  }
}

相比之下，每當觸發(fā)重新渲染時，調(diào)用方法將總會再次執(zhí)行函數(shù)。

我們?yōu)槭裁葱枰彺?？假設(shè)我們有一個性能開銷比較大的計算屬性 A，它需要遍歷一個巨大的數(shù)組并做大量的計算。然后我們可能有其他的計算屬性依賴于 A 。如果沒有緩存，我們將不可避免的多次執(zhí)行 A 的 getter！如果你不希望有緩存，請用方法來替代。

總結(jié)

合理使用計算屬性可以簡化我們的模版，并提升我們的開發(fā)效率，利用計算屬性的緩存功能還能減少表達式的計算次數(shù)，提升應用性能。計算屬性是框架中一個很好的特性，我們應該學會靈活使用。