🎯v-for 先还是 v-if 先？Vue2/3 编译真相

用 代码 + 编译结果 把差异讲透。

---

1. Vue2 的优先级：v-for 先于 v-if

1.1 源码层面

Vue2 的模板编译器在解析 AST 时，会把 v-for 节点标记为 父节点 ，v-if 标记为 子节点 （或同级节点），因此 循环先执行，条件判断后执行。

1.2 编译结果

<template>
  <div v-for="i in 100" v-if="i % 2 === 0">{{ i }}</div>
</template>

编译后（简化伪码）：

_render() {
  return _l(100, i => i % 2 === 0 ? _c('div', i) : null);
}

• _l 是 v-for 渲染函数，先循环 100 次 ，再逐条判断 i % 2。
• 后果 ：
  • 生成 100 个虚拟 DOM 节点，其中 50 个 null 被丢弃。
  • 多余计算 、内存浪费 、首屏白屏时间变长。

---

2. Vue3 的优先级：v-if 先于 v-for

2.1 编译结果

Vue3 模板编译器把 v-if 提升到 父级节点 ，v-for 退到 子级节点。

上例编译后：

_render() {
  return (_l(
    (100).filter(i => i % 2 === 0), // 先过滤
    i => _c('div', i)
  ));
}

• 先过滤再循环，只生成 50 个有效节点。
• 零多余计算，直接渲染正确结果。

---

3. 差异后果总结

• Vue2：先循环后判断 → 渲染多余节点 → 性能下降。
• Vue3：先判断后循环 → 零浪费 → 性能提升。

4. 最佳实践

• Vue2 ：用 computed 提前过滤，避免性能陷阱。
• Vue3 ：直接写即可，无需额外处理。