关于v-if和v-for连用出现的问题

业务场景：

根据后台返回的图片list在页面显示，页面中需要v-for循环出图片并且判断list是否为空，为空的话还需要v-else做一个为空的展示效果。从而出现了v-if和v-for连用的场景。
在vue实际开发中，我们避免不了会使用v-for和v-if来操作数据，但是v-for和v-if同时使用时，有一个先后运行的优先级，v-for比v-if的优先级更高，这就说明在v-for的每次循环运行中每一次都会调用v-if的判断，所以不推荐v-if和v-for在同一个标签内同时使用，连用代码也会报错。

问题实质：

问题的实质是因为在vue中会优先执行v-for, 当v-for把所有内容全部遍历之后 , v-if再对已经遍历的元素进行删除 , 造成了加载的浪费 , 所以应该在执行v-for之前优先执行v-if , 可以减少加载的压力

解决办法：

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中的判断转移到vue的computed的计算属性中

computed: {
    loadList() {
       const { list } = this
       return list.filter(item => item.value)
    }
}
//或者
<ul>
    <li v-for="(item,id) in formList" :key="id"></li>
</ul>
 
//利用vue的计算属性，过滤掉不需要的数据，剩下需要的数据再利用v-for循环遍历取出渲染
computed: {
    formList: function () {
        return this.list.filter(function (item) {
            return item.state
        })
    }
}