Vue计算属性computed简介及简单用法（表格筛选）

简介：
　　在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计算属性会立即返回之前的计算结果，而不必再次执行函数。
　　！计算属性可用于性能开销比较大的时候，有效的缓存可以很大程度上减少开销。