計算屬性就是當其依賴屬性的值發生變化時，這個屬性的值會自動更新。
首先來看看計算屬性的使用(效果圖)：
10-計算屬性.gif
<body>
<div id="app">
<input type="text" v-model="msg">
<p>原始字符：{{msg}}</p>
<p>計算屬性翻轉字符：{{reverseMsg}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:'Hello'
},
//vue的計算屬性
computed:{
reverseMsg(){
//返回翻轉后的字符串，當msg變化后reverseMsg會跟著變化
return this.msg.split('').reverse().join('')
}
}
})
</script>
</body>
其實計算屬性能做的，methods屬性和watch屬性同樣也能做，現在我們就來說說他們的區別：
computed 和methods 屬性的區別：
- 當頁面重新渲染（不是刷新）的時候，計算屬性不會變化，直接讀取緩存使用，適合較大量的計算和改變頻率較低的屬性，計算屬性是基于它們的依賴進行緩存的
- 而method，就是當頁面重新渲染的時候（頁面元素的data變化，頁面就會重新渲染），都會重新調用method
computed 和watch 屬性的區別：
- 計算屬性是計算屬性，觀察是觀察。計算屬性顧名思義就是通過其他變量計算得來的另一個屬性，而觀察watch是觀察一個特定的值，當該值變化時執行特定的函數。例如分頁組件中，我們可以檢測頁碼執行獲取數據的函數。
- 當你想要在數據變化響應時，執行異步操作或開銷較大的操作，使用watch這是很有用的。
計算屬性的寫法有2種，一種是沒有setter寫法，一種是有setter的寫法
沒有setter的寫法，性默認只有getter方法：
<script>
new Vue({
el:'#app',
data:{
msg:'Hello'
},
//vue的計算屬性
computed:{
//默認這是getter方法
reverseMsg(){
//返回翻轉后的字符串,這個返回值就是變量reverseMsg的值
return this.msg.split('').reverse().join('')
}
}
})
</script>
10-計算屬性-沒有setter.gif
有setter的寫法:(注意，此setter和getter再vue的計算屬性中的寫法是set和get)
<body>
<div id="app">
<input type="text" v-model="msg">
<p>原始字符：{{msg}}</p>
<p>計算屬性翻轉字符：{{reverseMsg}}</p>
</div>
<script>
var vueObj =new Vue({
el:'#app',
data:{
msg:'Hello'
},
//vue的計算屬性
computed:{
reverseMsg:{
get(){
//返回翻轉后的字符串,這個返回值就是變量reverseMsg的值
return this.msg.split('').reverse().join('')
},
set(newValue){
this.msg = newValue
}
}
}
})
</script>
</body>
10-計算屬性-有setter.gif
計算屬性getter不執行的情況：
???當包含計算屬性的節點被移除，并且模板中其他地方沒有再引用該屬性時，那么對應的計算屬性的getter方法不會執行。
