在 Vue 2 和 Vue 3 中，v-for 和 v-if 可以一起使用，但两者在处理顺序和推荐用法上存在明显区别，主要体现在优先级和最佳实践上：

优先级：v-for 的优先级高于 v-if。
这意味着 Vue 会先循环渲染所有列表项，再对每个项执行 v-if 判断是否显示。
即使某些项会被 v-if 过滤掉，它们仍然会被先渲染再隐藏，存在性能浪费。
示例：
```
<ul><li v-for="item in list" v-if="item.active" :key="item.id">{{ item.name }}</li>
</ul>
```
上述代码会先遍历 list 中的所有项，再判断每个项的 active 为 true 才显示，低效且不推荐。

最佳实践：
应避免直接在同一元素上使用，推荐使用 计算属性 先过滤数据，再用 v-for 渲染：

computed: {activeList() {return this.list.filter(item => item.active)}
}

<ul><li v-for="item in activeList" :key="item.id">{{ item.name }}</li>
</ul>

优先级：v-if 的优先级高于 v-for。
这意味着 v-if 会先判断是否渲染整个列表（或列表的父元素），再决定是否执行 v-for 循环。
此时 v-if 无法访问 v-for 中的迭代变量（如 item），因为循环还未执行。

示例：

<!-- 错误用法：v-if 无法访问 item -->
<ul><li v-for="item in list" v-if="item.active" :key="item.id">{{ item.name }}</li>
</ul>

上述代码在 Vue 3 中会报错，因为 v-if 执行时 item 尚未定义。

最佳实践：
- 若需过滤列表项：同样使用 计算属性 先过滤数据（与 Vue 2 一致）。
- 若需控制整个列表是否渲染：可将 v-if 放在 v-for 的父元素上：
```
<ul v-if="shouldShowList"><li v-for="item in list" :key="item.id">{{ item.name }}</li>
</ul>
```