/

Vue.js 計算屬性

Vue.js 計算屬性

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

什麼是計算屬性

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
 <p>{{ count }}</p>
</template>

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

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

1
2
3
<template>
 {{ count \* 10 }}
</template>

但您僅限於一個JavaScript 表達式。

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

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

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

1
2
3
4
5
6
7
<script>
export default {
 computed: {

 }
}
</script>

計算屬性的例子

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

  1. 我不需要調用count()。Vue.js會自動調用該函數
  2. 我使用了常規函數（而不是箭頭函數）來定義count計算屬性，因為我需要能夠通過this訪問組件實例。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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()：

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
 <p>{{ now }}</p>
</template>

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

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

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