编译时和运行时

你的代码在"准备食材"还是"开火炒菜"？（编译时vs运行时）

咱写Vue3的时候，总听说什么"编译时优化"、"运行时性能"。那到底是啥，下面用炒菜来举个例子

一、代码也有"备菜"和"炒菜"两个阶段

想象你是个大厨（程序员不就是代码厨子么？）：

• 备菜阶段（编译时） ：菜还没下锅！你在切土豆、腌肉、调酱料。对应到Vue就是：<template>标签里的代码被编译器咔咔一顿处理，变成浏览器能看懂的JavaScript。
• 炒菜阶段（运行时） ：真开火了！锅里的油开始冒烟，你把食材下锅翻炒。对应到浏览器里就是：处理数据响应式、DOM更新这些动态操作。

二、举个真实案例：你家厨房（Vue项目）里的故事

场景1：模板语法报错（备菜时翻车）

<template>
  <!-- 这里故意写错v-for -->
  <div v-for="item in items" v-if="showList"></div>
</template>

这时候你保存代码，控制台直接炸红！这就是编译时报错——相当于你备菜时发现土豆都长毛了，根本没法下锅。

场景2：接口数据报错（炒菜时翻车）

// 正确写法应该用ref包裹
const userInfo = { name: '张三' }

onMounted(async () => {
  userInfo.value = await fetchUser() // 这里会报错！
})

这时候页面能正常加载，但一点按钮就崩。这就是运行时错误——相当于菜都下锅了才发现忘放盐，只能在炒菜过程中补救。

三、Vue3里的"备菜神器"和"炒菜秘籍"

备菜神器（编译时）

• <script setup>语法糖：编译器悄悄把你的代码转成标准语法
• 静态节点提升：把不会变的DOM节点提前准备好（像提前切好的葱花）
• 自定义指令预处理：比如你的v-lazy在编译阶段就被分析

炒菜秘籍（运行时）

• reactive()响应式：数据变的时候自动更新DOM（自动翻炒）
• 虚拟DOM比对：智能计算哪里需要更新（像自动调节火候）
• 生命周期钩子：控制代码执行时机（掌握下锅顺序）

四、新手常踩的坑

1. 在setup里写console.log(props)
   这时候props可能还没准备好！就像备菜时非要尝汤的咸淡。

2. 在模板里写复杂表达式

   <!-- 编译时没问题，但运行时每次都要计算 -->
   {{ fullName.split('').reverse().join('') }}
   

   这相当于炒菜时现场剥蒜，应该提前在computed里处理好。

3. 动态组件用错姿势

   <!-- 编译时无法预知组件 -->
   <component :is="someComponent"></component>
   

   这种情况要特别注意异步加载，就像临时换食材容易手忙脚乱。

五、怎么当个好厨子（开发者）

1. 编译时多检查：用TypeScript+Volar插件，相当于备菜时用电子秤
2. 运行时多监控：用Vue Devtools观察数据流动，就像看锅里的火候
3. 分清楚阶段：能提前处理的别拖到运行时（比如静态节点标记）

六、终极记忆法

• 所有你在代码里肉眼可见的template写法，基本都要经过编译阶段
• 所有你在浏览器里能调试的data变化、DOM操作，都是运行时阶段
• 遇到报错先看控制台——编译错误像语法检查，运行时错误像程序崩溃