为什么Vue中的v-if和v-for不建议在同一个元素上使用?

...
<p v-for="(item,index) in items" :key="index" v-if="item.xxx === xxx"></p>
...

永远不要把 v-if 和 v-for 同时用在同一个元素上。 —— vue2风格指南
同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。 —— vue3官方文档

同时把 v-if 和 v-for 用在同一个元素上会发生什么?

首先我们要明白它们两个同时作用于一个标签上时的优先级，谁先生效

在vue2中v-for的优先级更高，这就意味着上面代码会先把items遍历完，然后在遍历完成后的每个p标签上进行v-if的判断。听上去好像这么做也没什么大问题，嗯…在vue2中这么写确实不会报错，但不推荐，就像官方文档中说的，这样写二者的优先级不明显，而且这些判断其实是可以优化的，比如在v-for遍历之前先将items过滤，这也正是官方推荐的做法

为了过滤一个列表中的项目 (比如 v-for=“user in users” v-if=“user.isActive”)。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。
—— vue2风格指南

在vue3中v-if的优先级更高，所以在上面代码中v-if想访问item的属性时就会报错，因为此时item还未定义，所以不要想着把它们写在同一个元素上了

推荐做法

一般我们在两种常见的情况下会倾向于这样做：

• 为了过滤一个列表中的项目 (比如 v-for=“user in users” v-if=“user.isActive”)。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。
• 为了避免渲染本应该被隐藏的列表 (比如 v-for=“user in users” v-if=“shouldShowUsers”)。这种情形下，请将 v-if 移动至容器元素上 (比如 ul、ol)。

—— vue2风格指南