了解如何使用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
計算輸出的示例代碼。注意:
- 我不需要調用
count()
。Vue.js會自動調用該函數 - 我使用了常規函數(而不是箭頭函數)來定義
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組件終止並重新初始化時,才會更新。
在這種情況下,一個方法更適合您的需求。