避免v-if和v-for一起使用

为什么要避免v-if和v-for在同一个元素上同时使用呢？因为在 vue 的源码中有一段代码时对指令的优先级的处理，这段代码是先处理v-for再处理v-if的。所以如果我们在同一层中一起使用两个指令，会出现一些不必要的性能问题，比如这个列表有一百条数据，再某种情况下，它们都不需要显示，当 vue 还是会循环这个 100 条数据显示，再去判断v-if，因此，我们应该避免这种情况的出现。

<!-- 不好的🌰 -->
<h3 v-if="status" v-for="item in 100" :key="item">{{item}}</h3>

<!-- 好的🌰 -->
<template v-if="status" >
  <h3 v-for="item in 100" :key="item">{{item}}</h3>
</template>

打赏