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>
複製代碼