Vue的計算屬性

通常我們會在模板中繫結表示式，模板是用來描述檢視結構的。如果模板的表示式存在過多的邏輯，就會變得臃腫不堪，可維護和可讀性就會較差，因此，為了簡化邏輯，當某個屬性值依賴於其他屬性的值時，就可以使用計算屬性

來看一個簡單的計算屬性的例子

<div id="example">
<input type="text" v-model="a"/>
<input type="text" v-model="b"/>
<br>
a={{ a }},b={{ b }},c={{ c }}
</div>
var vm=new Vue({
el:"#example",
data:{
a:'a',
b:'b'
},
computed:{
c:{
get:function(){
return this.a+this.b
},
set:function(newVal){
var names=newVal.splite('')
this.a=names[0]
this.b=names[1]
}
}
}
})

在這個例子中，我們在html中只需要插入a，b，c即可，而背後的計算過程交由computed：計算屬性來解決，當a和b的值發生改變時，c的值也會改變，而當我們的c發生改變時，相對於的a和b的值也會發生改變

這樣看來，計算屬性的使用還是很舒服的，但是如果再計算屬性方法中執行大量的耗時操作，就可以會帶來一些效能問題，比如說：在計算屬性getter中迴圈一個大的陣列以執行很多操作，那麼當頻繁呼叫該計算屬性時，就會導致大量不必要的運算

在早期的Vue中，只要讀取相對於的計算屬性，就要執行一遍getter，但是在現在的Vue中，只有計算屬性依賴的屬性值發生改變才會執行新的getter

這就要說到計算屬性和方法的區別：計算屬性的快取，基於依賴進行的快取。即，當程式所依賴的觀察資料屬性發生改變之後，才重新執行getter，否則有快取可以節省效能

只是這樣也有一個問題，只有Vue例項中被觀察的資料屬性發生了改變時才會重新執行getter，但是有時候計算屬性依賴實時的非觀察資料屬性（例如最新的時間），所以Vue提供了快取開關（關鍵詞：cache），當我們將cache設為false時，每次執行都要重新執行一遍getter