vue2以及vue3官方文档中都明确的指出 避免 v-if 和 v-for 用在一起
vue2
官方文档
解释
在 Vue 2 中，v-for 的优先级高于 v-if，也就是说，Vue 2 在渲染时，会先处理 v-for 生成列表项，再对子项判断 v-if 是否渲染。 比如， 在下面代码中。
<ul>
<li v-for="user in users" v-if="user.isActive" :key="user.id">{{ user.name }}
</li>
</ul>
Vue 2 在执行时，会先遍历整个 `` 列表，然后对每个 user 进行 v-if 条件判断。这意味着即使 users 列表很大(比如一千条)，并且其中大部分 user.isActive 为 false时，Vue 仍然会遍历整个列表，造成不必要的计算开销，影响渲染性能。
解决方案
一：当v-if的判断条件依赖于v-for的某个值时(item,index) 使用计算属性进行数据过滤
错误写法（这个写法性能不好）
<ul><li v-for="user in users" v-if="user.isActive" :key="user.id">{{ user.name }}</li>
</ul>
正确做法（使用计算属性）
computed: {activeUsers() {return this.users.filter(user => user.isActive);}
}
<ul><li v-for="user in activeUsers" :key="user.id">{{ user.name }}</li>
</ul>
二：当在v-if不依赖v-for遍历的（item，index）时，我们可以将v-if写在v-for的外层，这样就可以让v-if判断优先
错误写法
<ul><li v-for="user in users" v-if="shouldShowUsers" :key="user.id">{{ user.name }}</li>
</ul>
正确做法（将 v-if 放到外层）
<ul v-if="shouldShowUsers"><li v-for="user in users" :key="user.id">{{ user.name }}</li>
</ul>
vue3
官方文档
解释
vue3更改了v-if，v-for的优先级 。v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名。
<!--当v-if的判断条件依赖于v-for的某个值时(item,index) 。这会抛出一个错误，因为属性 todo 此时没有在该实例上定义
-->
<li v-for="todo in todos" v-if="!todo.isComplete">{{ todo.name }}
</li>
解决方案
用vue2的解决方案就可以啦
