vue中v-if和v-for优先级在vue2和vue3中的区别

在 vue 2.x 中，在一个元素上同时使用 v-if 和 v-for 时， v-for 会优先作用。
在 vue 3.x 中， v-if 总是优先于 v-for 生效。

在 vue2 中， v-for 优先级高于 v-if ，我们可以这样实现：

<ul>
 <!-- vue2中，v-for优先级高于v-if -->
 <li v-for="item in todoList" v-if="!item.done" :class="{todo: !item.done}" :key="item.id">
 <span>{{item.task}}</span>
 </li>
</ul>
 
<ul>
 <li v-for="item in todoList" v-if="item.done" :class="{finished: item.done}" :key="item.id">
 <span>{{item.task}}</span>
 </li>
</ul>

在 vue3 中，由于 v-if 优先级要高于 v-for ，所以不能像 vue2 那样将 v-for 和 v-if 放在同一个元素上，我们在 li 外面套一层用来执行 for 循环：

<ul>
 <template v-for="item in list" :key="item.id">
 <li v-if="!item.done" :class="{todo: !item.done}">
  <span>{{item.task}}</span>
 </li>
 </template>
</ul>
<ul>
 <template v-for="item in list" :key="item.id">
 <li v-if="item.done" :class="{finished: item.done}">
  <span>{{item.task}}</span>
 </li>
 </template>
</ul>

可以看出，如果在 vue2.x 中 v-if 和 v-for 在同一个元素上使用是无法直接在 vue3.x 中兼容的。
最佳实践
针对 v-if 和 v-for 的使用，其实官方是建议我们使用计算属性来处理的，这样既提高了性能，又可以兼容到 vue3.x，接下来我们看看计算属性实现方式：

<div id="app">
 <!-- 最佳实践 -->
 <ul class="todo-list">
 <li v-for="item in todos" class="todo" :key="item.id">
  <span>{{item.task}}</span>
 </li>
 </ul>
 
 <ul v-if="showFinished">
 <li v-for="item in finished" :key="item.id" class="finished">
  <span>{{item.task}}</span>
 </li>
 </ul>
 
 <p>
 show finished？
 <input type="checkbox" v-model="showFinished" />
 {{showFinished ? 'yes' : 'no'}}
 </p>
</div>

// vue3.x
Vue.createApp({
 data() {
 return {
  msg: 'Todo List',
  showFinished: true,
  list: todoList,
 };
 },
 computed: {
 finished() {
  return todoList.filter(t => t.done);
 },
 todos() {
  return todoList.filter(t => !t.done);
 },
 },
}).mount('#app');
 
// vue2.x
new Vue({
 el: '#app',
 data() {
 return {
  msg: 'Todo List',
  showFinished: true,
  list: todoList,
 };
 },
 computed: {
 finished() {
  return todoList.filter(t => t.done);
 },
 todos() {
  return todoList.filter(t => !t.done);
 },
 },
});

总结

vue2.x 中 v-for 优先级高于 v-if ，vue3.x 相反；
尽量避免在同一个元素上面同时使用 v-if 和 v-for ，建议使用计算属性替代。