業(yè)務(wù)場(chǎng)景：

根據(jù)后臺(tái)返回的圖片list在頁(yè)面顯示，頁(yè)面中需要v-for循環(huán)出圖片并且判斷l(xiāng)ist是否為空，為空的話還需要v-else做一個(gè)為空的展示效果。從而出現(xiàn)了v-if和v-for連用的場(chǎng)景。
在vue實(shí)際開(kāi)發(fā)中，我們避免不了會(huì)使用v-for和v-if來(lái)操作數(shù)據(jù)，但是v-for和v-if同時(shí)使用時(shí)，有一個(gè)先后運(yùn)行的優(yōu)先級(jí)，v-for比v-if的優(yōu)先級(jí)更高，這就說(shuō)明在v-for的每次循環(huán)運(yùn)行中每一次都會(huì)調(diào)用v-if的判斷，所以不推薦v-if和v-for在同一個(gè)標(biāo)簽內(nèi)同時(shí)使用，連用代碼也會(huì)報(bào)錯(cuò)。

問(wèn)題實(shí)質(zhì)：

問(wèn)題的實(shí)質(zhì)是因?yàn)樵趘ue中會(huì)優(yōu)先執(zhí)行v-for, 當(dāng)v-for把所有內(nèi)容全部遍歷之后 , v-if再對(duì)已經(jīng)遍歷的元素進(jìn)行刪除 , 造成了加載的浪費(fèi) , 所以應(yīng)該在執(zhí)行v-for之前優(yōu)先執(zhí)行v-if , 可以減少加載的壓力

解決辦法：

1.當(dāng)控制v-if的元素不存在v-for中 , 可以使用template包裹住對(duì)應(yīng)的v-for , 也可以使用父級(jí)元素添加v-if , 可以不加載從而優(yōu)化性能

添加一個(gè)template

<div>
    <template v-if="showActive">
        <div v-for"item in list" :key="item.id">{{item.value}}</div>
    </template>
    <div class="bottom"/>
</div>

添加到父級(jí)

<ul v-if="showActive">
   <li v-for="item in list" :key="item.id">{{item.value}}</li>
</ul>

2.可以使用過(guò)濾器將v-if中的判斷轉(zhuǎn)移到vue的computed的計(jì)算屬性中

computed: {
    loadList() {
       const { list } = this
       return list.filter(item => item.value)
    }
}
//或者
<ul>
    <li v-for="(item,id) in formList" :key="id"></li>
</ul>
 
//利用vue的計(jì)算屬性，過(guò)濾掉不需要的數(shù)據(jù)，剩下需要的數(shù)據(jù)再利用v-for循環(huán)遍歷取出渲染
computed: {
    formList: function () {
        return this.list.filter(function (item) {
            return item.state
        })
    }
}