vue2、vue3中的v-if和v-for的优先级问题

vue2

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

在 Vue 2 中，不推荐在同一个元素上同时使用 v-if 和 v-for，主要是由于可能引发的性能问题和逻辑混淆。当 v-if 和 v-for 结合使用时，会导致以下问题：

1. 性能问题：  当 v-if 和 v-for 同时存在于同一个元素上时，Vue 会在每次循环迭代时都重新渲染和销毁元素。这可能会导致不必要的 DOM 更新和性能下降，特别是在较长的列表上。这是因为每次循环迭代都会重新计算条件，并进行 DOM 操作。

2. 逻辑混淆：  同时使用 v-if 和 v-for 会增加代码的复杂性和理解难度。将条件和循环逻辑分离可以使代码更加清晰，并让开发人员更容易理解和维护。

<template>
  <div class="test-container">
     <div v-for="(item,index) in list" v-if="item === 9" :key="item" ></div>
  </div>
</template>
<script>
    export default {
      data(){
        return {
          numberArr:[1,2,3,4,5,6,7,8,9,10]
        }
      }
    };
</script>
<style scoped>
</style>

但是本段代码实际的逻辑为

this.numberArr.map(function (item,index) {
  if (item===9) {
    return item
  }
})

相反，最佳实践是将条件渲染 (v-if) 和列表渲染 (v-for) 分开处理。可以使用计算属性或方法来处理数据，然后在模板中分别使用 v-if 和 v-for。

以下是一个示例代码：

<template>
  <div>
    <div v-if="showDiv" v-for="item in filteredItems" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDiv: true,
      items: [
        { id: 1, name: 'Item 1', isActive: true },
        { id: 2, name: 'Item 2', isActive: false },
        { id: 3, name: 'Item 3', isActive: true }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.isActive);
    }
  }
}
</script>

在上述示例中，我们使用了计算属性 filteredItems 来过滤具有 isActive 属性的项目。然后，我们在模板中使用 v-for 来渲染过滤后的结果，并使用 v-if 来条件性地渲染每个元素。这样可以保持逻辑的清晰和性能的优化。

vue3

当 v-if 与 v-for 一起使用时，v-if 具有比 v-for 更高的优先级。

我们依旧用上面的例子进行分析

<template>
  <div class="test-container">
     <div v-for="(item,index) in numberArr" v-if="item === 9" :key="item"></div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      numberArr: [1,2,3,4,5,6,7,8,9,10]   //需要遍历的数据
    }
  }
};
</script>
<style scoped>
</style>

由于 v-if 优先级高,导致页面并没有进行渲染,控制台报错。以下为控制台报错信息

[Vue warn]: Property "index" was accessed during render but is not defined on instance.

但是下面这种用法控制台并不会报错但是会警告

<template>
  <div class="test-container">
     <ul>
        <li v-for="(item, index) in objList" :key="index" v-if="item.isShow">
          {{ item.name }}
        </li>
      </ul>
  </div>
</template>
<script>
    export default {
      data(){
        return {
          objList:[
           { name: 'obj2', isShow: false },
           { name: 'obj2', isShow: true },
          ]
        }
      }
    };
</script>
<style scoped>
</style>

但是这种写法也会有一个问题，无论是否符合v-if的条件都进行了报错

官方推荐的写法是这样的, 把 v-for 移动到容器元素上,例如ul,ol 或者外面包裹一层 template

<template>
  <div class="test-container">
     <ul>
         <template v-for="(item, index) in objList" :key="index">
          <li v-if="item.isShow">
            {{ item.name }}
          </li>
        </template>
      </ul>
  </div>
</template>
<script>
    export default {
      data(){
        return {
          objList:[
           { name: 'obj2', isShow: false },
           { name: 'obj2', isShow: true },
          ]
        }
      }
    };
</script>
<style scoped>
</style>

但如果想要有条件地跳过循环的执行，那么可以将v-if置于外层元素或者template上。

例如这样

<template>
  <div class="test-container">
     <ul v-if="objList.length">
          <li v-for="(item, index) in objList" :key="index">
            {{ item.name }}
          </li>
      </ul>
  </div>
</template>
<script>
export default {
  data(){
    return {
      objList:[
           { name: 'obj2', isShow: false },
           { name: 'obj2', isShow: true },
      ]
    }
  }
};
</script>
<style scoped>
</style>

总结

1. 在vue2中，v-for的优先级高于v-if
2. 在vue3中，v-if的优先级高于v-for