vue中v-for与v-if的优先级

vue2中：v-for 大于 v-if

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。

• 当你只想为部分项渲染节点时，这种优先级的机制会十分有用，如下：

<li v-for="todo in todos" v-if="!todo.isComplete">{{ todo }}
</li>

解决这个问题（在外边包一层）：

<template v-for="todo in todos"><li v-if="!todo.isComplete">{{ todo.name }}</li>
</template>

同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。

vue3中：v-if 大于 v-for

在以下代码中,v-if会优先执行。v-if是访问不到todo的，因此，不管isComplete是否有值，都是不会显示的

<!--这会抛出一个错误，因为属性 todo 此时没有在该实例上定义
-->
<li v-for="todo in todos" v-if="!todo.isComplete">{{ todo.name }}
</li>

建议：

同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。两种常见的情况可能导致这种用法：过滤列表中的项目 (例如，v-for="user in users" v-if="user.isActive")。
在这种情况下，可以用一个新的计算属性来替换 users，该属性返回过滤后的
列表 (例如 activeUsers)。避免渲染应该隐藏的列表 (例如 v-for="user in users" v-if="shouldShowUsers")。
在这种情况下，将 v-if 移至容器元素 (如 ul、ol)。