在vue中，談到計算屬性的時候免不了和函數進行比較，他們的區別在於計算屬性通過響應式依賴進行緩存，當頁面觸發重新渲染的時候，計算屬性會直接返回緩存的值而不會重新計算，而函數的話會重新執行。我們看一下下方的動圖和例子就一目瞭然了。
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="../../dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<div>{{getStr()}}</div>
<div>{{expression}}</div>
<div>{{this.count}}</div>
<button @click="getCount">updateCount</button>
<button @click="updateStr">updateStr</button>
</div>
<script>
new Vue({
el: '#app',
data: {
str: 'computed',
count: 0
},
computed: {
expression () {
console.log('computed...')
return this.str
}
},
methods: {
getStr () {
console.log('getStr')
return 'getStr'
},
getCount () {
this.count++
},
updateStr () {
this.str = this.str + this.count
}
}
})
</script>
</body>
</html>
從動圖裏面我們可以直觀的看到當this.count的值改變時觸發了頁面的重新渲染，這個時候計算屬性因爲依賴的str屬性沒變化所以沒有重新計算，而函數則重新被執行。所以適當的使用計算屬性可以避免由於重新渲染而帶來的函數重新計算，優化頁面的性能。除了這個因素外，一些複雜的字符串過濾也可以用計算屬性，例如{{message.split('').reverse().join('')}}, 這一類的就可以寫成計算屬性，讓你的代碼更具可讀性。