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的值發(fā)生改變時，c的值也會改變，而當我們的c發(fā)生改變時，相對于的a和b的值也會發(fā)生改變

這樣看來，計算屬性的使用還是很舒服的，但是如果再計算屬性方法中執(zhí)行大量的耗時操作，就可以會帶來一些性能問題，比如說：在計算屬性getter中循環(huán)一個大的數(shù)組以執(zhí)行很多操作，那么當頻繁調(diào)用該計算屬性時，就會導致大量不必要的運算

在早期的Vue中，只要讀取相對于的計算屬性，就要執(zhí)行一遍getter，但是在現(xiàn)在的Vue中，只有計算屬性依賴的屬性值發(fā)生改變才會執(zhí)行新的getter

這就要說到計算屬性和方法的區(qū)別：計算屬性的緩存，基于依賴進行的緩存。即，當程序所依賴的觀察數(shù)據(jù)屬性發(fā)生改變之后，才重新執(zhí)行getter，否則有緩存可以節(jié)省性能

只是這樣也有一個問題，只有Vue實例中被觀察的數(shù)據(jù)屬性發(fā)生了改變時才會重新執(zhí)行getter，但是有時候計算屬性依賴實時的非觀察數(shù)據(jù)屬性（例如最新的時間），所以Vue提供了緩存開關（關鍵詞：cache），當我們將cache設為false時，每次執(zhí)行都要重新執(zhí)行一遍getter