Vue 2和Vue 3中v-for与v-if的优先级及性能优化

在 Vue 2 中，v-for 的优先级高于 v-if。这意味着在同一元素上同时使用 v-for 和 v-if 时，v-for 会先执行，然后 v-if 会在每次迭代中进行判断。

示例

<ul>
  <li v-for="item in items" v-if="item.isActive">
    {{ item.name }}
  </li>
</ul>

在这个例子中，v-for 会先遍历 items 数组，然后 v-if 会检查每个 item.isActive 是否为 true。只有 item.isActive 为 true 的项才会被渲染。

注意事项

1. 性能问题：如果 items 数组很大，且只有少数项满足 v-if 的条件，那么 v-for 会遍历整个数组，这可能会导致性能问题。

2. 推荐做法：为了避免不必要的遍历，通常建议在 v-for 之前先过滤数据。例如：

   computed: {
     activeItems() {
       return this.items.filter(item => item.isActive);
     }
   }
   

   然后在模板中使用过滤后的数据：

   <ul>
     <li v-for="item in activeItems">
       {{ item.name }}
     </li>
   </ul>
   

Vue 3 的变化

在 Vue 3 中，v-if 的优先级高于 v-for。这意味着在 Vue 3 中，v-if 会先执行，然后再执行 v-for。因此，在 Vue 3 中，如果你在同一元素上同时使用 v-for 和 v-if，v-if 会先判断条件，然后再进行遍历。

总结

• Vue 2：v-for 优先级高于 v-if。
• Vue 3：v-if 优先级高于 v-for。

在 Vue 2 中，为了避免性能问题，建议在 v-for 之前先过滤数据。