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>
复制代码