在Vue2中v-for比v-if具有更高的优先级,这意味着在每次循环迭代时，v-if的条件判断都会执行一次，这可能会导致在有大量数据和复杂条件逻辑的情况下性能消耗较大，甚至出现语法错误
- 如果执行循环的代码是false，但是还是要先执行完v-for,然后再移除，不利于浏览器的执行
- 解决思路：
1.在使用v-for的元素外面加一层template虚拟元素，将v-if写在template元素中
2.如果条件出现在循环内部,不得不放在一起时,可通过计算属性computed提前过滤掉那些不需要显示的项
<template v-if="isShow">
<p v-for="item in lists" :key="item.id"></p>
</template>
判断条件在循环内部时可写成以下形式
<ul>
<li
v-for="user in users"
v-if="user.isActive"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
//过滤后的列表只会在 users 数组发生相关变化时才被重新运算，过滤更高效。
//使用 v-for="user in activeUsers" 之后，我们在渲染的时候只遍历活跃用户，渲染更高效。
//转换
computed: {
activeUsers: function () {
return this.users.filter(function (user) {
return user.isActive
})
}
}
<ul>
<li
v-for="user in activeUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
- v-if和v-for的优先级问题在vue3中不需要考虑，vue3更新了v-if和v-for的优先级，使v-if的优先级高于v-for
