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

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


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

1.1 源码层面

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

1.2 编译结果

vue 复制代码
<template>
  <div v-for="i in 100" v-if="i % 2 === 0">{{ i }}</div>
</template>

编译后(简化伪码):

js 复制代码
_render() {
  return _l(100, i => i % 2 === 0 ? _c('div', i) : null);
}
  • _lv-for 渲染函数,先循环 100 次 ,再逐条判断 i % 2
  • 后果
    • 生成 100 个虚拟 DOM 节点,其中 50 个 null 被丢弃。
    • 多余计算内存浪费首屏白屏时间变长

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

2.1 编译结果

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

上例编译后:

js 复制代码
_render() {
  return (_l(
    (100).filter(i => i % 2 === 0), // 先过滤
    i => _c('div', i)
  ));
}
  • 先过滤再循环,只生成 50 个有效节点。
  • 零多余计算,直接渲染正确结果。

3. 差异后果总结

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

4. 最佳实践

  • Vue2computed 提前过滤,避免性能陷阱。
  • Vue3直接写即可,无需额外处理。
相关推荐
Song5591 天前
elpis框架抽离并发布 SDK-NPM 包
前端
Mintopia1 天前
低代码平台如何集成 AIGC 技术?核心技术衔接点解析
前端·javascript·aigc
Mintopia1 天前
Next.js + AI-SDK + DeepSeek:3 分钟建设属于你的 AI 问答 Demo
前端·javascript·next.js
anyup1 天前
历时 10 天+,速度提升 20 倍,新文档正式上线!uView Pro 开源组件库体验再升级!
前端·typescript·uni-app
_AaronWong1 天前
仿 ElementPlus 的函数式弹窗调用
前端·element
用户21411832636021 天前
AI 当 “牛马”!免费云服务器 + 开源插件,7×24 小时写小说,一晚交出 70 章长篇
前端
IT_陈寒2 天前
React 18新特性全解析:这5个隐藏API让你的性能飙升200%!
前端·人工智能·后端
朦胧之2 天前
【NestJS】项目调试
前端·node.js
!win !2 天前
不定高元素动画实现方案(中)
前端·动画
xw52 天前
不定高元素动画实现方案(中)
前端·css