详解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>