模板内的表达式常用于计算简单的运算,当其过长或者逻辑复杂时,会难以维护,Vue的计算属性就是用来解决这个问题的。
什么是计算属性
在模板中双向绑定一些数据或者表达式时,如果表达式过长或者逻辑过于复杂时,就会变得臃肿甚至难以阅读和维护,比如:
<div>
{{text.split(',').reverse().join(',')}}
</div>
这里的表达式包括3个运算,并不是很清晰,所以在遇到复杂的逻辑时应该使用计算属性,上例可以使用计算属性进行改写:
<div>
{{demoText}}
</div>
<script>
export default {
data() {
return {
text: '1234,456'
}
},
computed: {
demoText: function () {
return this.text.split(',').reverse().join(',')
}
}
}
</script>
所有的计算属性都以函数的形式写在Vue实例内的computed选项内,最终返回计算结果。
计算属性用法
在一个计算属性里可以完成各种复杂的逻辑,包括运算,函数调用等,只要最终返回一个结果就可以了,除了上例简单的用法,计算属性还可以依赖多个Vue实例的数据,只要其中任一数据变化,计算属性会重新执行,试图也会更新。例如,下面的示例展示的是购物车内两个包裹的物品总价:
<template>
<div>
总价:{{prices}}
</div>
</template>
<script>
export default {
data() {
return {
prices: 0,
package1:[{
name: '',
price: '10',
count: 1,
},
{
name: '',
price: '20',
count: 4,
},
],
package2:[{
name: '',
price: '30',
count: 3,
}]
}
},
computed:{
prices(){
var prices=0;
for(var i=0;i<this.package1.length;i++){
this.prices=this.package1[i].price*this.package1[i].count;
}
for(var i=0;i<this.package2.length;i++){
this.prices=this.package1[i].price*this.package1[i].count;
}
return prices;
}
}
}
</script>
当package1和package2中的商品有任何变化,比如 购买数量变化或者增删商品变化时,计算属性prices就会自动更新,视图中的总价也会自动变化。
计算属性缓存
其实methods可以起到和computed同样的作用,只需要把方法放到methods里面即可,那为什么还要使用计算属性呢?因为计算属性是基于它的依赖缓存的,一个计算属性所依赖的数据发生变化时,它才会重新取值,所以text只要不改变,计算属性就不会更新,methods不同只要重新渲染就会被调用,函数也会被执行。
使用计算属性还是methods取决于你是否需要缓存,当遍历大数组或者做大量的数据计算时,应该使用计算属性。