v-for与v-if一同使用的注意事项

在vue官方文档里明确了v-for和v-if不推荐同时在一个节点使用。而原因就是它们两个的优先级不同，但是vue2.0文档和vue3.0文档里它们的优先级不一样。

vue2.0版v-for和v-if优先级

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

//当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，所以这个模板：
<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>
//将会经过如下运算：
this.users.map(function (user) {
  if (user.isActive) {
    return user.name
  }
})
//这种情况，哪怕我们只渲染出一小部分用户的元素，也得在每次重新渲染的时候遍历整个列表，
//不论活跃用户是否发生了变化。

正确做法是通过将其更换为在如下的一个计算属性上遍历：

<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 数组发生相关变化时才被重新运算，过滤更高效。
2. 使用 v-for=“user in activeUsers” 之后，我们在渲染的时候只遍历活跃用户，渲染更高效。
3. 解耦渲染层的逻辑，可维护性 (对逻辑的更改和扩展) 更强。

vue3.0版v-for和v-if优先级
当它们处于同一节点，v-if 的优先级比 v-for 更高，这意味着 v-if 将没有权限访问 v-for 里的变量：

<!-- This will throw an error because property "todo" is not defined on instance. -->

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>
//可以把 v-for 移动到 <template> 标签中来修正：
<template v-for="todo in todos" :key="todo.name">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

总结：
vue2.0和vue3.0 对两者的优先级说法不一样，但是相同点就是都不能发在同一个节点上使用这两个指令，可以根据需求使用计算属性过滤一下或者置于外层元素 (或 < template >) 上。