v-if 和 v-for 的优先级是什么？

一、结论先行

在 Vue 2 中，当 v-if 与 v-for 同时作用于同一个元素时，v-for 的优先级高于 v-if。

这意味着：会先执行循环，再对每一项进行条件判断。

但需要注意：Vue 官方明确不推荐将两者写在同一元素上，因为这会导致性能浪费和逻辑混乱。

---

二、原理分析

1. 模板编译过程

Vue 在编译模板时，会将指令转换为 render 函数。我们来看一个例子：

<p v-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) {
  return genFor(el, state)
} else if (el.if && !el.ifProcessed) {
  return genIf(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> 包裹，在外层做条件判断：

<template v-if="showList">
  <li v-for="item in items" :key="item.id">
    {{ item.name }}
  </li>
</template>

• <template> 不会渲染真实 DOM；
• 只有 showList 为真时，才执行 v-for，避免无效循环。

✅ 场景 2：v-if 用于过滤列表项

通过 计算属性 提前过滤数据：

computed: {
  filteredItems() {
    return this.items.filter(item => item.isVisible)
  }
}

<li v-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 supported in Vue 3.

这进一步说明：这种写法本身就是反模式，应尽早避免。

---

六、总结

问题	答案
优先级	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 设计哲学的理解，非常适合在面试中展现专业度。