模板內(nèi)的表達(dá)式常用于簡單的運(yùn)算，當(dāng)其過長或邏輯復(fù)雜時，會難以維護(hù)，本章的計算屬性就是用于解決該問題的。
3.1-什么是計算屬性
在模板中進(jìn)行雙向綁定時，由于表達(dá)式過于復(fù)雜或過長，會變得臃腫甚至難以閱讀與維護(hù)，比如：
<div>{{ text.split(',').reservse.join(',')}}</div>
這里的表達(dá)式包含三個操作，并不是很清晰，將上述計算屬性進(jìn)行改寫：
<div id="lmz">
??? {{reversedText}}
</div>
<script>
??? var lmz = new Vue({
??????? el:"#lmz",
??????? data:{
??????????? text:"123,456"
??????? },
??????? computed:{
??????? reversedText:function(){
????????? returnthis.text.split(',').reverse.join('.");
??????? }
??????? }
? })
</script>
所有的計算屬性都以函數(shù)的形式寫在Vue實例內(nèi)的computed選項內(nèi)，最終返回計算后的結(jié)果。
3.2計算屬性用法
在一個計算屬性里可以完成各種復(fù)雜的邏輯，包括運(yùn)算、函數(shù)調(diào)用等，只要最終返回一個結(jié)果就可以，除了上述簡單的用法，計算屬性還可以依賴多個Vue實例的數(shù)據(jù)，只要其中任一數(shù)據(jù)變化，計算屬性就會重新執(zhí)行，視圖也會更新。例如，下面的實例展示的是在購物車內(nèi)兩個包裹的物品總價：
<div id="lmz">
??? 總價::{{prices}}
</div>
<script>
var lmz =new Vue({
??? el:"#lmz",
??? data:{
? ? ? ? package1:[
???????????? {
????????????? name:"lmz",
????????????? price:888,
????????????? count:2
????????????? },
?????????? {
?????????????? name:"lgz",
????????????? price:666,
????????????? count1
????????????? },
??? ? ? package2:[
???????????? {
?????????????? name:"apple",
????????????? price:8888,
????????????? count:3
????????????? },
?????????? {
?????????????? name:"banana",
????????????? price:20
????????????? count:10
????????????? },
??????? ]
??? },
computed:{
???? prices:function(){
??????? var prices=0;
??????? for(var i =0;i<this.pakage1.length;i++){
???????? prices+=this.package1[i].price*this.package1[i].count;
??? }
??????? for(var i =0;i<this.pakage2.length;i++}(
???????? prices+=this.package2[i].price*this.package2[i].count;
??? }
return prices;
}
}
})
</script>
當(dāng)package1或package1中的商品有任何變化，比如購買商品數(shù)量變換或增刪商品時，計算屬性prices就會自動更新，視圖中的總價也會自動變化。
計算屬性還有兩個使用的小技巧容易被忽略：一是計算屬性可以依賴其它計算屬性。二是計算屬性不僅可以依賴當(dāng)前Vue實例的數(shù)據(jù)，還可以依賴其它實例的數(shù)據(jù)。例如：
<div id="lmz1"><div>
<div id="lmz2">{{reversesText}}</div>
<script>
??? var lmz1 = new Vue({
????? el:"#lmz1",
??? data：{
?????? text:'123,456'
???? }
});
?? var lmz2 = new Vue({
??? el:"#lmz2",
??? computed:{
??? reversesText:function(){
?????? return lmz1.text.split(',').join(',');
????? }
??? }
})
</script>
解析：這里我們創(chuàng)建了兩個Vue實例lmz1和lmz2，在lmz2的計算屬性reversedText中，依賴的是lmz1中的數(shù)據(jù)text。這樣的用法在學(xué)習(xí)組件的時候會用到，尤其是多人協(xié)同開發(fā)時很常用，因為你寫的一個組件需要依賴他人的組件提供。
3.3計算屬性緩存
在上一節(jié)介紹指令與事件時，會發(fā)現(xiàn)調(diào)用methods里的方法也可以與計算屬性起到同樣的作用。
那么，既然使用menthods就可以實現(xiàn)，為什么還需要計算屬性呢？
原因就是計算屬性是基于它的依賴緩存的，一個計算屬性所依賴的數(shù)據(jù)發(fā)生變化時，它才會重新取值，所以只有值不改變，計算屬性就不會更新。
使用計算屬性還是methods取決于是否需要緩存，當(dāng)便利大數(shù)組和做大量計算時，應(yīng)當(dāng)使用計算屬性。
