简介:
在vue中一些数据经常依赖于别的数据做出改变,且改变的逻辑也较复杂,这个时候就需要用到计算属性computed。通俗来说就是当前数据不是确定的,要经常做出改变,而这个改变是其他数据改变导致的。
基本语法:
computed: {
mydata:function(){
/*函数主体*/
return data; //需要输出的数据 此时data就等于mydata
}
}
在HTML中使用{ { mydata } }来显示
注意:mydata不能在data中声明,否则会出错。
简单例子(表格筛选):
目标:
- 使用select控件选择类型 (收入/支出/全部)
- 使用datepicker选择月份
- 表格中显示对应数据
1.在table标签中的data属性设置要填充的数组mydata
2.在computed中设置mydata显示逻辑
computed:{
//从服务端接受的数据为data1 包含时间date 类型type等信息
mydata:function(){
var data2=[];//创建data2来判断类型,从data1中接受符合条件的项
var data3=[];//创建data3来判断月份,从data2中接受符合条件的项
if(this.select=='收入'||this.select=='支出'){//判断select的选项
for(var i=0;i<this.data1.length;i++){//循环data1数组,如果符合条件就push进data2数组
if(this.data1[i].type==this.select){
data2.push(this.data1[i]);
}
}
}
else data2=this.data1;//选项为空或者全部时显示所有项
if(this.month!=null){//如果月份不为空
for(var i=0;i<data2.length;i++){//判断月份
if((this.month).getMonth()==(data2[i].date).substr(5,2)-1){
data3.push(data2[i]);//同上
}
}
}
else data3=data2;//月份为空则选择全部
return data3;//返回最终得出的数据到mydata中,再使用mydata填充表格
}
总结:
1.与watch的比较
一开始首先想到的是用watch来监听类型的变化,根据变化做出数组的改变,后来发现第一次筛选后的数据需要赋值给从服务端接受的数组data1,此时data1就会发生改变,再发生改变时,data1数组会越来越少。
后来想到的办法是在created中接收到的数据赋给两个数组,其中一个用来保存完整的数据,在watch中每次开头把完整的数据赋给data1。
这个问题解决后,又出现了新的问题,因为还要做月份的判断,如果也是用watch监听月份的变化,那么月份变化的时候类型不会变化,也就不会触发对应watch函数,这样就导致了两个筛选不能同时进行。
!当mydata依赖于多个属性时,computed要优于watch。
2.与方法function()的比较
methods: {
mydata:function(){
/*函数主体*/
return data; //需要输出的数据 此时data就等于mydata
}
}
在HTML中使用{ { mydata() } }来显示
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要 依赖的属性 还没有发生改变,多次访问 mydata计算属性会立即返回之前的计算结果,而不必再次执行函数。
!计算属性可用于性能开销比较大的时候,有效的缓存可以很大程度上减少开销。