模板内的表达式常用于简单的运算，当其过长或逻辑复杂时，会难以维护，本章的计算属性就是用于解决该问题的。
3.1-什么是计算属性
在模板中进行双向绑定时，由于表达式过于复杂或过长，会变得臃肿甚至难以阅读与维护，比如：
<div>{{ text.split(',').reservse.join(',')}}</div>
这里的表达式包含三个操作，并不是很清晰，将上述计算属性进行改写：
<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>
所有的计算属性都以函数的形式写在Vue实例内的computed选项内，最终返回计算后的结果。
3.2计算属性用法
在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以，除了上述简单的用法，计算属性还可以依赖多个Vue实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。例如，下面的实例展示的是在购物车内两个包裹的物品总价：
<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>
当package1或package1中的商品有任何变化，比如购买商品数量变换或增删商品时，计算属性prices就会自动更新，视图中的总价也会自动变化。
计算属性还有两个使用的小技巧容易被忽略：一是计算属性可以依赖其它计算属性。二是计算属性不仅可以依赖当前Vue实例的数据，还可以依赖其它实例的数据。例如：
<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>
解析：这里我们创建了两个Vue实例lmz1和lmz2，在lmz2的计算属性reversedText中，依赖的是lmz1中的数据text。这样的用法在学习组件的时候会用到，尤其是多人协同开发时很常用，因为你写的一个组件需要依赖他人的组件提供。
3.3计算属性缓存
在上一节介绍指令与事件时，会发现调用methods里的方法也可以与计算属性起到同样的作用。
那么，既然使用menthods就可以实现，为什么还需要计算属性呢？
原因就是计算属性是基于它的依赖缓存的，一个计算属性所依赖的数据发生变化时，它才会重新取值，所以只有值不改变，计算属性就不会更新。
使用计算属性还是methods取决于是否需要缓存，当便利大数组和做大量计算时，应当使用计算属性。
网友评论