v-if和v-for連用出現的問題

解決方案有兩個能夠根據具體狀況而定

1.當控制v-if的元素不存在v-for中 , 能夠使用template包裹住對應的v-for , 也能夠使用父級元素添加v-if , 能夠不加載從而優化性能

添加一個template

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

添加到父級

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

2.若是v-if 控制的元素存在v-for中 , 能夠經過使用計算器屬性來回避 , 好比使用計算器屬性在頁面加載以前進行一邊過濾

computed: {
    loadList() {
       const { list } = this
       return list.filter(item => item.value)
    }
}


問題的實質是由於在vue中會優先執行v-for, 當v-for把全部內容所有遍歷以後 , v-if再對已經遍歷的元素進行刪除 , 形成了加載的浪費 , 因此應該在執行v-for以前優先執行v-if , 能夠減小加載的壓力