为什么不建议v-if和v-for一起使用

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中，浪费性能，尤其是当之需要渲染很小一部分的时候。

v-for 和 v-if 不要在同一个标签中使用,因为解析时先解析 v-for 再解析 v-if。如果遇到需要同时使用时可以考虑写成计算属性的方式。

例如以下例子，如果有几百条数据但是只有一个满足 user.isActive ，如果v-for和v-if一起使用，仍然先执行几百次的遍历，然后再执行v-if判断，最后只渲染了一条数据。。

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

1
2
3
4
5