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

<div v-for="(item,index) in color" :key="index" v-if="flag"> {{item}} </div>

  data() {
    return {
      color: ['red', 'yellow', 'blue'],
      flag: true
    }
  }

这样可以渲染，但是v-for的优先级高于v-if，如果flag为false，那么实际上是执行了创建再执行了销毁，所以不建议这么写

建议的写法：

    <template v-if="flag">
      <div v-for="(item,index) in color" :key="index"> {{item}} </div>
    </template>

或：

    <div v-for="(item,index) in color" :key="index">
      <template v-if="flag">{{item}}</template>
    </div>