为什么避免 v-if 和 v-for 用在一起

答：

Vue 2.x 中 v-for 优先级高于 v-if，所以 2.x 版本中在一个元素上同时使用 v-if 和 v-for 时，v-for 会优先作用，造成性能浪费（先把列表渲染出来，再挨个判断条件隐藏某些项）。
Vue 3.x 中 v-if 总是优先于 v-for 生效，导致 v-if 访问不到 v-for 中的变量。

解析

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

为了过滤列表中的某些项：

<ul>
  <li v-for="user in users" v-if="user.isActive">{{ user.name }}</li>
</ul>

这种写法在 Vue 2.x 中会先循环整个列表，再用 v-if 过滤，每次重新渲染都要遍历整个数组。推荐改为用 computed 提前过滤：

<ul>
  <li v-for="user in activeUsers">{{ user.name }}</li>
</ul>

computed: {
  activeUsers() {
    return this.users.filter(u => u.isActive)
  }
}

为了判断是否要渲染整个列表（比如权限控制）：
```
<ul v-if="shouldShowUsers">
  <li v-for="user in users">{{ user.name }}</li>
</ul>
```
这种情况下应该把 v-if 提到外层容器上，避免在每个 v-for 项里都做判断。

总结：永远不要在同一个元素上同时使用 v-if 和 v-for。需要过滤就用 computed，需要条件显示整个列表就把 v-if 提到父级。

来源整理自：vue3js.cn 面试官系列