了解如何使用Vue的計算屬性來緩存計算結果


什麼是計算屬性

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

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

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

該屬性可以執行一些小計算,例如

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

但您僅限於一個JavaScript 表達式

此外,除了這個技術上的限制外,還需要考慮到模板應該只關注向用戶顯示數據,而不執行邏輯計算。

為了做更多事情,並且擁有更具聲明性的模板,您可以使用計算屬性

計算屬性在Vue組件的computed屬性中定義:

<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>

計算屬性 vs 方法

如果您已經了解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>

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

計算屬性的結果在items數據屬性更改之前會被內部緩存。

重要提示:只有當一個响應式源更新時,計算屬性才會更新。普通的JavaScript方法並不具有响應式,所以一個常見的例子是使用Date.now()

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

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

它將渲染一次,然後即使組件重新渲染,也不會更新。只有在頁面刷新,Vue組件終止並重新初始化時,才會更新。

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