Vue.js計算屬性

了解如何使用Vue計算屬性緩存計算


什麼是計算屬性

在Vue.js中,您可以使用括號輸出任何數據值:

<template>
  <p>{{ count }}</p>
</template>

<script> export default { data() { return { count: 1 } } } </script>

該屬性可以託管一些小的計算,例如

<template>
  {{ count * 10 }}
</template>

但您只能使用一個JavaScript表達

除此技術限制外,您還需要考慮模板應僅與向用戶顯示數據有關,而不應執行邏輯計算。

要使用單個表達式做更多的事情,並擁有更多的聲明性模板,您可以使用計算屬性

計算屬性在computedVue組件的屬性:

<script>
export default {
  computed: {

} } </script>

計算屬性的示例

這是一個使用計算屬性的示例代碼count計算輸出。注意:

  1. 我不用打電話了count()。 Vue.js自動調用該函數
  2. 我使用了常規函數(而不是箭頭函數)來定義count計算屬性,因為我需要能夠通過以下方式訪問組件實例this

    <template>
    <p>{{ count }}</p>
    </template>
    

    <script> export default { data() { return { items: [1, 2, 3] } }, computed: { count: function() { return 'The count is ’ + this.items.length * 10 } } } </script>

計算屬性與方法

如果你已經知道Vue方法,您可能會想知道有什麼區別。

首先,必須調用方法,而不僅僅是引用方法,因此您需要進行調用count()代替count如果你有一個count方法:

<script>
export default {
  data() {
    return {
      items: [1, 2, 3]
    }
  },
  methods: {
    count: function() {
      return 'The count is ' + this.items.length * 10
    }
  }
}
</script>

但是主要的區別是計算的屬性被緩存

結果count計算屬性在內部緩存,直到items數據屬性更改。

重要說明:計算的屬性是僅在反應性來源更新時更新。常規的JavaScript方法不是被動的,因此一個常見的示例是使用Date.now()

<template>
  <p>{{ now }}</p>
</template>

<script> export default { computed: { now: function () { return Date.now() } } } </script>

它將渲染一次,然後即使組件重新渲染也不會更新。當Vue組件退出並重新初始化時,僅刷新頁面即可。

在這種情況下,一種方法更適合您的需求。

免費下載我的Vue手冊


更多vue教程: