解决方案有两个能够根据具体情况而定

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 , 能够削减加载的压力