v-if 和 v-for 的优先级
Vue 2 中的优先级
在Vue 2中：
v-for的优先级高于v-if- 当它们同时出现在一个元素上时，
v-for会先执行
<!-- Vue 2 中，v-for 优先级更高 --> <div v-for="item in items" v-if="item.isActive"> {{ item.name }} </div>问题：这会导致性能问题，因为即使某些元素不需要渲染（v-if为 false），v-for也会遍历整个列表。
Vue 3 中的优先级
在Vue 3中：
v-if的优先级高于v-for（优先级顺序被调整了）- 当它们同时出现在一个元素上时，
v-if会先执行
<!-- Vue 3 中，v-if 优先级更高 --> <div v-for="item in items" v-if="item.isActive"> {{ item.name }} </div> <!-- 这会报错，因为 v-if 先执行时访问不到 item -->最佳实践
推荐做法（Vue 2 和 Vue 3 通用）
1. 使用计算属性过滤数据：
<template> <div v-for="item in activeItems" :key="item.id"> {{ item.name }} </div> </template> <script> export default { computed: { activeItems() { return this.items.filter(item => item.isActive) } } } </script>2. 使用<template>标签包裹：
<template v-if="shouldShow"> <div v-for="item in items" :key="item.id"> {{ item.name }} </div> </template>主要区别总结
| 特性 | Vue 2 | Vue 3 |
|---|---|---|
| 优先级 | v-for>v-if | v-if>v-for |
| 同时使用 | 可以但不推荐（性能问题） | 会报错（访问不到循环变量） |
| 官方建议 | 避免同时使用 | 避免同时使用 |
核心建议：无论在 Vue 2 还是 Vue 3 中，都应该避免在同一个元素上同时使用v-if和v-for，使用计算属性或嵌套模板来优化代码结构和性能。
