标准答案
- 模板编译大致包括 parse、transform、codegen：先把模板解析成 AST，再做指令、静态节点和 patch flag 等转换，最后生成 render 函数代码。
- 编译时能提前分析模板结构，标记静态内容、动态绑定和更新路径，减少运行时需要判断的工作。
- 运行时负责组件挂载、响应式依赖收集、调度更新、执行 render，并把新旧结果应用到真实 DOM。
- Vue 2 和 Vue 3 都有模板编译，但 Vue 3 在编译优化、静态提升、patch flag 和 block tree 上做了更多工作。
- 理解编译和运行时边界，有助于解释为什么 template 不是字符串拼接，也能解释为什么某些语法限制必须在编译期确定。
题目解析
回答时可以用“模板不是浏览器直接执行，而是变成 render 函数”开场。
编译时越知道哪些地方会变，运行时越能少做无意义比较。Vue 3 的很多性能优化来自编译器和运行时配合。
面向业务开发不需要手写编译器，但要知道动态 key、v-if/v-for、slot、组件边界会影响生成结果和更新范围。
代码示例
下面的模板会被编译成描述 UI 的渲染逻辑，运行时再根据响应式状态更新。
Vue
<template>
<button :disabled="loading" @click="submit">
{{ loading ? '提交中' : '提交' }}
</button>
</template>TypeScript
// 简化理解：模板最终会变成类似 render 的函数
function render(ctx) {
return h(
'button',
{
disabled: ctx.loading,
onClick: ctx.submit
},
ctx.loading ? '提交中' : '提交'
)
}常见误区
- 认为 template 会在浏览器里作为字符串直接执行。
- 只讲 Virtual DOM，不讲编译器如何提前标记静态和动态部分。
- 把编译时优化理解成可以自动修复所有性能问题，忽略组件拆分和依赖设计。