Vue由浅入深系列(三)详解Computed计算属性

computed计算属性主要是对于一个变量进行逻辑运算以后，得到一个新的值，相比于在模板template中写入逻辑运算也更加清晰明了，而且更加的有利于后期维护，而且，计算属性是由缓存机制的，当其依赖的属性的值发生变化的时，计算属性会重新计算。反之则使用缓存中的属性值。

1.基础使用之getter函数

• 比方说是一个人的姓名，分为姓和名，即firstName和lastName，接下来，用计算属性得出它的fullName

export default {
    name: "Test",
    data(){
        return{
            firstName:'',
            lastName:'',
        }
    },
    computed:{
        fullName(){
            return `${this.firstName} ${this.lastName}`;
        }
    }
}

• 上面其实只是缩写，他的实际写法应该是这样子的，这里其实主要是用到了计算属性的getter函数

computed:{
    fullName:{
        get(){
            return `${this.firstName} ${this.lastName}`;
        }
    }
}

2.基础使用之setter函数

• 可以看到，上面的全名格式就是姓名之间用了空格分隔，那么，我们换一种思路，如果我们通过设置了它的全名，是否可以通过设置的全名拿到回调，返回它的姓和名，这时候，就可以用到setter函数，即操作this.fullName='jack demon'，那么，它的姓和名都会触发相应的更新。

computed:{
    fullName:{
        get(){
            return `${this.firstName} ${this.lastName}`;
        },
        set(newValue){
            let names=newValue.split(' ');
            this.firstName=names[0];
            this.lastName=names[1];
        }
    }
}

3.使用计算属性结合v-for来提高性能

• 在vue性能提升中有一个说法，是v-for和v-if最好不要同时使用，会降低性能，因为首先你要明白一点，v-for的优先级要比v-if要高，所以，举个例子，当你有一个长度为5的数组需要遍历，但其中只有大于50才显示，经过v-if以后才显示，虽然你只显示一条，但仍然需要遍历整个数组，所以，这种时候，就可以先用计算属性进行过滤，然后再用v-for渲染计算属性过滤之后得到的列表。tips：对于不需要改动的长列表，可以使用Object.freeze()进行性能优化哦

<template>
  <div>
    <ul>
      <li v-for="(item,index) in filterList" :key="index">{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
    name: "Test",
    data(){
        return{
            list:[8,20,28,52,33],
        }
    },
    computed:{
        filterList:{
            get(){
                return this.list.filter(x=>x>50);     //[52]
            },
        }
    },
}
</script>