Vue.js計算屬性
雖然在模板中綁定表達式是非常便利的，但是它們實際上只用於簡單的操作。在模板中放入太多的邏輯會讓模板過重且難以維護。比如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
這樣，模板不再簡單和清晰。在實現反向顯示 message 之前，你應該通過一個函數確認它。所以，Vue.js提供了計算屬性來讓我們去處理實例中的復雜邏輯。
計算屬性 (computed properties) 就是不存在於原始數據中，而是在運行時實時計算出來的屬性。
例如我們要實現一個學生成績表
| 學科 | 分數 |
|---|---|
| 數學 | 80 |
| 物理 | 90 |
| 英語 | 100 |
| 總分 | 270 |
| 平均分 | 90 |
後端代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--學生成績表-->
<div id="app" class="container">
<table class="table table-bordered table-striped table-hover">
<caption class="text-center"><h2>學生成績表</h2></caption>
<thead >
<th class="text-center">學科</th>
<th class="text-center">分數</th>
</thead>
<tbody class="text-center">
<tr>
<td>數學</td>
<td><input type="text" v-model.number="math" class="form-control text-center"></td>
</tr>
<!--v-model.number 制定為數字類型-->
<tr>
<td>物理</td>
<td><input type="text" v-model.number="physics" class="form-control text-center"></td>
</tr>
<tr>
<td>英語</td>
<td><input type="text" v-model.number="english" class="form-control text-center "></td>
</tr>
<!--求總分-->
<tr>
<td>總分</td>
<td>{{ math + physics+ english}}</td>
</tr>
<tr>
<td>平均分</td>
<td>{{ Math.round((math + physics+ english)/3) }}</td>
</tr>
<tr>
<td>總分(計算屬性)</td>
<td>{{ sum }}</td>
</tr>
<tr>
<td>平均分[計算屬性]</td>
<td>{{average}}</td>
</tr>
<!--求平均分-->
</tbody>
</table>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
math:80,
physics:90,
english:100
},
computed:{
sum: function () {
return this.math + this.physics + this.english
},
average:function () {
return Math.round((this.sum/3))
}
}
})
</script>
</body>
</html>
從上面的圖片中我們看到了，計算的邏輯比較亂，不方便後期的維護與管理。這時我們使用計算屬性來處理實例中的復雜邏輯。達到的效果和那種復雜的邏輯一樣，但是更方便我們維護代碼和邏輯。
<tr>
<td>總分(計算屬性)</td>
<td>{{ sum }}</td>
</tr>
<tr>
<td>平均分[計算屬性]</td>
<td>{{average}}</td>
</tr>
<script>
var app = new Vue({
el:"#app",
data:{
math:80,
physics:90,
english:100
},
computed:{
sum: function () {
return this.math + this.physics + this.english
},
average:function () {
return Math.round((this.sum/3))
}
}
})
二、計算屬性 和 Methods的區別
上述的操作，我們也可以用methods方法實現，但兩者之間存在本質區別。
當頁面重新渲染（不是刷新）的時候，計算屬性不會變化，直接讀取緩存使用，適合較大量的計算和改變頻率較低的屬性；而method，就是當頁面重新渲染的時候（頁面元素的data變化，頁面就會重新渲染），都會重新調用method。
如果不希望有緩存，我們可以用method取代computed。
疑惑：為什麽需要緩存？
假設我們有一個重要的計算屬性 A ，這個計算屬性需要一個巨大的數組遍歷和做大量的計算。然後我們可能有其他的計算屬性依賴於 A 。如果沒有緩存，我們將不可避免的多次執行 A 的 getter ！
三、計算屬性的方法
每一個計算屬性都包含一個getter和setter方法，計算屬性默認為getter 。當需要更改其中的部分數據時，就可以使用setter方法，就可以在修改一個普通數據時，觸發setter方法，執行一些自定義的操作。
Vue.js計算屬性