快應(yīng)用 計(jì)算屬性

了解計(jì)算屬性，學(xué)會(huì)如何使用計(jì)算屬性

通過(guò)本節(jié)，你將學(xué)會(huì)：

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

計(jì)算屬性的基本使用

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

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

在這個(gè)地方，模板不再是簡(jiǎn)單的聲明式邏輯。如果我們?cè)诤芏嗟胤接蒙线@樣的表達(dá)式，有可能讓模版的可讀性降低，并且重復(fù)使用同一表達(dá)式邏輯會(huì)讓代碼變得冗余，不易維護(hù)。對(duì)此，我們可以使用計(jì)算屬性：

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

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

    this.message = 'Goodbye'

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

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

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

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

計(jì)算屬性默認(rèn)只有 getter ，不過(guò)在需要時(shí)你也可以提供一個(gè) 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ì)算屬性的緩存

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

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

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

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

這也同樣意味著下面的計(jì)算屬性將不再更新，因?yàn)?nbsp;?Date.now()? 不是響應(yīng)式依賴(lài)：

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

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

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

總結(jié)

合理使用計(jì)算屬性可以簡(jiǎn)化我們的模版，并提升我們的開(kāi)發(fā)效率，利用計(jì)算屬性的緩存功能還能減少表達(dá)式的計(jì)算次數(shù)，提升應(yīng)用性能。計(jì)算屬性是框架中一個(gè)很好的特性，我們應(yīng)該學(xué)會(huì)靈活使用。