一、结论先行
在 Vue 2 中，当
v-if与v-for同时作用于同一个元素时，v-for的优先级高于v-if。
这意味着：会先执行循环，再对每一项进行条件判断。
但需要注意：Vue 官方明确不推荐将两者写在同一元素上，因为这会导致性能浪费和逻辑混乱。
二、原理分析
1. 模板编译过程
Vue 在编译模板时，会将指令转换为render函数。我们来看一个例子：
<pv-for="item in items"v-if="isShow":key="item.id">{{ item.title }}</p>对应的render函数大致如下（简化）：
_l(items,item=>isShow?_c('p',[item.title]):_e())_l是 Vue 内部的列表渲染函数（对应v-for）；- 可以看到：先遍历
items，然后在循环体内判断isShow。
这说明：v-for先于v-if执行。
2. 源码佐证
在 Vue 编译器的代码生成阶段（src/compiler/codegen/index.js）：
if(el.for&&!el.forProcessed){returngenFor(el,state)}elseif(el.if&&!el.ifProcessed){returngenIf(el,state)}处理顺序是：先检查v-for，再检查v-if，进一步验证了v-for优先级更高。
三、为什么不要混用？
当v-if和v-for写在同一元素上时，会产生以下问题：
❌ 性能浪费
- 即使
v-if条件为false，v-for仍会完整遍历整个数组； - 每次响应式更新都会重复这一过程，造成不必要的计算。
❌ 语义不清
- 如果
v-if依赖循环变量（如v-if="item.isVisible"），逻辑尚可理解； - 但如果
v-if是外部状态（如v-if="showList"），则完全没必要在循环内部判断。
四、正确做法（最佳实践）
✅ 场景 1：v-if控制整个列表是否显示
使用<template>包裹，在外层做条件判断：
<templatev-if="showList"><liv-for="item in items":key="item.id">{{ item.name }}</li></template><template>不会渲染真实 DOM；- 只有
showList为真时，才执行v-for，避免无效循环。
✅ 场景 2：v-if用于过滤列表项
通过计算属性提前过滤数据：
computed:{filteredItems(){returnthis.items.filter(item=>item.isVisible)}}<liv-for="item in filteredItems":key="item.id">{{ item.name }}</li>- 优势：逻辑清晰、性能最优、响应式自动更新；
- 符合“关注点分离”原则：模板只负责渲染，数据过滤交给 JS。
五、Vue 3 的变化（加分项）
在Vue 3中，编译器会直接报错，禁止
v-if与v-for作用于同一元素：
Error: v-if/v-for on the same element will no longer be supportedinVue3.这进一步说明：这种写法本身就是反模式，应尽早避免。
六、总结
| 问题 | 答案 |
|---|---|
| 优先级 | v-for>v-if（Vue 2） |
| 是否推荐混用？ | 不推荐！官方反对 |
| 正确做法 | ① 外层用<template v-if>；② 内部用计算属性过滤 |
| Vue 3 行为 | 直接报错，强制解耦 |
💡一句话记住：
“控制整体显隐用外层 v-if，过滤列表项用 computed。”
✅参考
- Vue 2 官方风格指南：Avoid v-if with v-for
- Vue 3 迁移指南：v-if and v-for
这个版本逻辑严密、层次分明，既讲清了原理，又给出了工程实践建议，还能体现你对 Vue 设计哲学的理解，非常适合在面试中展现专业度。
