Vue2及Vue3的为什么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执行过程中要调用的变量可能还不存在，这会导致错误。

使用场景

通常有两种情况会导致需要v-if和v-for同时使用：

• 为了 筛选列表中的项目 ，例如 v-for = user in users v-if = user.isActive 。在这一点上，例如可以定义计算的特性。 activeUsers ，让它返回过滤后的列表， users.filter( u => u.isActive)

• 为了 避免呈现本应隐藏的列表。 ，例如 v-for = user in users v-if = shouldShowUsers 。此时，您可以将 v-if 绑定在容器元素上，例如 ul,ol 或在外包层 template