Vue中v-for不要和v-if一起使用

在Vue2中v-for和v-if一起使用时会报错：

The 'xxx' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'

原因：

Vue2中当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中

---

一般出现两个情况的时候，我们可能需要会将v-for和v-if同时使用：

一：选择性地渲染列表，例如根据某个特定属性来决定是否渲染

<ul>
  <li v-for="user in users"  v-if="user.isActive"  :key="user.id">
    {{ user.name }}
  </li>
</ul>
这样就算只渲染出一小部分用户的元素，也得在每次重新渲染的时候遍历整个列表

这种情况使用计算属性computed：

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

computed: {
  activeUsers: function () {
    return this.users.filter(function (user) {
      return user.isActive
    })
  }
}

这样我们将会获得如下好处：

1. 过滤后的列表只会在 users 数组发生相关变化时才被重新运算，过滤更高效。

1. 使用 v-for="user in activeUsers" 之后，我们在渲染的时候只遍历符合条件的用户，渲染更高效。

1. 解耦渲染层的逻辑，可维护性 (对逻辑的更改和扩展) 更强。

二.避免渲染本应该被隐藏的列表

<ul>
  <li v-for="user in users"  v-if="shouldShowUsers"  :key="user.id">
    {{ user.name }}
  </li>
</ul>

更新为

<ul v-if="shouldShowUsers">
  <li v-for="user in users" :key="user.id">
    {{ user.name }}
  </li>
</ul>

这样我们将会获得如下好处：

通过将 v-if 移动到容器元素，我们不会再对列表中的每个用户检查 shouldShowUsers。取而代之的是，我们只检查它一次，且不会在 shouldShowUsers 为否的时候运算 v-for。

---

在Vue3中v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名：

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

在外新包装一层 <template> 再在其上使用 v-for 可以解决这个问题 (这也更加明显易读)：

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

---参考于Vue官网