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

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

我们先来看一段代码

<h-tab-pane
              v-for="(item, index) in tabItems"
              :key="index"
              :label="item.title"
              :id="item.id"
              :name="item.id"
              v-if="item.show"
            >
              <comment :is="item.componentName"></comment>
            </h-tab-pane>

观察上面这个组件中v-for和v-if一起使用了
在Vue中，我们会讨论到优先级的一个问题
首先就是性能的问题，把v-if嵌套在v-for里面的话，会导致在每次循环遍历的时候都会去执行一次v-if，计算一次，这样子的话会造成不必要的性能浪费
其次
在这里当vue去处理指令的时候v-for的优先级比v-if的优先级是要高的，所以的话v-if是拿不到v-for中的变量的，这样就会导致无意义。