vue2和vue3中v-if和v-for共用问题

image.png

<template>
  <ul>
    <li v-for="color in colors"
        :key="color"
        v-if="color !=='red'">
      {{ color }}
    </li>
  </ul>
</template>

<script>

export default {
  name: "Test",
  data() {
    return {
      colors: ['red', 'green', 'blue'],
    }
  },
}
</script>

在vue2中，不建议v-if和v-for一起使用。因为先执行v-for，循环完再执行v-if，如果发现为false，刚创建的又要删掉，会造成性能浪费、页面卡顿。最好的方法时使用计算属性来处理数据。
有的同学说可以在每层循环里利用<template><template/>标签加v-if，这个方法在有些情况下并不适合：

image.png

<template>
  <ul>
    <li v-for="color in colors"
        :key="color"
        >
      <template v-if="color !=='red'">
        {{ color }}
      </template>
    </li>
  </ul>
</template>

<script>

export default {
  name: "Test",
  data() {
    return {
      colors: ['red', 'green', 'blue'],
    }
  },
}
</script>

可以看出，如果用v-if来过滤掉一部分数据的话，外层的结构还是会创建，并不是我们预期的效果。

在Vue3中，v-if比v-for先执行，所以可以同时使用。