🎯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直接写即可,无需额外处理。
相关推荐
原生高钙8 小时前
大模型的流式响应实现
前端·ai编程
zzywxc7878 小时前
如何利用AI IDE快速构建一个简易留言板系统
开发语言·前端·javascript·ide·vue.js·人工智能·前端框架
CaracalTiger8 小时前
网站漏洞早发现:cpolar+Web-Check安全扫描组合解决方案
java·开发语言·前端·python·安全·golang·wpf
TimelessHaze8 小时前
面试必备:深入理解与实现高效瀑布流布局
前端·面试·trae
linyi78 小时前
Rocket.Chat Video Call
前端·javascript
石小石Orz8 小时前
为什么有些依赖必须 import *引入使用?
前端·cursor·trae
玲小珑9 小时前
LangChain.js 完全开发手册(四)Callback 机制与事件驱动架构
前端·langchain·ai编程
前往悬崖下寻宝的神三算9 小时前
Vue Router 也能“强类型”?vite-plugin-vue-typed-router 上手体验
前端·vue.js
鹏多多9 小时前
开发个人微信小程序类目选择/盈利方式/成本控制与服务器接入指南
前端·javascript·程序员