vue.2x为什么不建议v-for与v-if共用？

首先，我们看一下官方解释
避免 v-if 和 v-for 用在一起

---

为什么？

当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级。

哪怕我们只渲染出一小部分用户的元素，也得在每次重渲染的时候遍历整个列表，不论活跃用户是否发生了变化。

假如有一个列表，循环了10次的数据，每一次，都需要进行v-if的判断。

循环10次，判断10次，如果需要循环1000次呢，那也需要判断1000次，而v-if的判断相对的比较耗费性能。

大量的判断会极大的降低项目质量。

---

如何避免这个问题？

情况一：在v-if不依赖v-for的前提下，我们可以将v-if写在v-for的外层，这样就可以让v-if判断优先。

情况二：当v-if的判断条件依赖于v-for的某个值时(item,index)，我们则可以使用如下方法。

这种方法不在dom上去判断是否显示，直接在计算属性（computed）上做好过滤，dom上（template中）直接遍历已经被过滤之后的计算属性。
从计算成本上来说，在计算属性中过滤会比在dom中判断是否显示更低。

以上内容针对vue2版本，vue3是可以一起用的，vue3更新了优先级，v-if高于v-for