計算屬性
vue的模板里可以使用表達式，但是它的設計初衷是用於簡單計算，在模板中放入太多邏輯會讓模板過重且難以維護。例如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
這里很難一眼看出是要顯示什么，而且要多次使用的話也很麻煩，因此對於復雜邏輯應使用計算屬性
錯誤示例 ```html
{{ message.split('').reverse().join('') }}
<br>
正確寫法
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 直接使用方法名就行，不用加括號 -->
<p>{{ reversedMessage }}</p>
</div>
<script>
//建議vue的變量命與作用的標簽id一致
let app = new Vue({
el: "#app", //關聯dom對象
data: {
message: 'I have a dream' //模板使用的數據
},
//定義計算屬性
computed: {
// 在computed里定義方法，使用的時候直接寫方法名
reversedMessage: function () {
// `this` 指向 app 實例，data里面的數據可以直接獲取到htis.message
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
## 計算屬性與方法的不同
上述例子中也可以通過調用方法來達到同樣的目的
在組件中定義方法
// 在組件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
調用方法
<p>Reversed message: "{{ reversedMessage() }}"</p>
就得到的結果而言，兩種方式是完全一致的。但是不同的是，計算屬性是基於它們的依賴進行緩存的，也就是說，計算屬性只有在它的相關依賴發生改變時才會重新求值，對於上述的例子，只要message不發生改變，多次訪問reversedMessage計算屬性會立即返回結果而不必再次執行函數
下面我們來驗證這個結論 ```html
使用計算屬性
{{reversedMessage}}
<hr>
<p>使用方法</p>
<p>{{reversedMessageMethod()}}</p>
打開html，右鍵檢查-console
## 小結 - 模板內表達式包含復雜邏輯時，應使用計算屬性 - 只要計算屬性使用的數據不發生變化，計算屬性就不會執行，而是直接使用緩存