详解v-if和v-for不能同时使用

前言

在Vue官方文档中，明确说明了不建议将v-for和v-if同时使用。因为两者作用在同一个元素时，优先级是不同的。

• 在vue2中，v-for的优先级更高
• 在vue3中，v-if的优先级更高

Vue2：

在Vue2中，v-for的优先级是高于v-if的，如果作用在同一元素上，输出的渲染函数中会先执行循环再判断条件，哪怕只渲染列表中一小部分元素，也得在每次重渲染的时候[遍历]整个列表，这会造成性能的浪费

Vue3：

而在Vue3中，v-if的优先级时高于v-for的，因此v-if执行时要调用的变量可能还不存在，会导致报错。

解决方法：

1.使用空标签 template，让for循环在template上面；

<template v-for="item in list" >
 
        <div v-if="active" :key="item .id">
            {{item .name}}
        </div >
 
</template>