vue compile源码实现
Vue 编译源码实现分析
Vue 的模板编译过程将模板字符串转换为渲染函数，主要分为解析、优化和代码生成三个阶段。
解析阶段（Parser）
将模板字符串转换为抽象语法树（AST），使用正则表达式和字符串处理逐层解析模板内容。
// 示例：解析开始标签的正则
const ncname = `[a-zA-Z_][\\w\\-\\.]*`
const qnameCapture = `((?:${ncname}\\:)?${ncname})`
const startTagOpen = new RegExp(`^<${qnameCapture}`)HTML 解析器通过循环处理字符串，识别开始标签、结束标签、文本和注释等节点类型，构建树形结构的 AST。
优化阶段（Optimizer）
对 AST 进行静态标记，识别静态节点和静态根节点，用于后续渲染优化。
function markStatic(node) {
node.static = isStatic(node)
if (node.type === 1) {
for (let i = 0; i < node.children.length; i++) {
markStatic(node.children[i])
}
}
}静态节点指不依赖动态数据的 DOM 节点，在 patch 阶段可以直接复用避免重复渲染。
代码生成阶段（Codegen）
将优化后的 AST 转换为可执行的渲染函数代码字符串，最终通过 new Function 生成渲染函数。
function generate(ast) {
const code = ast ? genElement(ast) : '_c("div")'
return `with(this){return ${code}}`
}
function genElement(el) {
if (el.staticRoot && !el.staticProcessed) {
return genStatic(el)
} else if (el.once && !el.onceProcessed) {
return genOnce(el)
} else {
return `_c('${el.tag}',${genData(el)},${genChildren(el)})`
}
}核心编译流程
模板编译入口位于 src/compiler/index.js，主要流程：
export const createCompiler = createCompilerCreator(function baseCompile(
template,
options
) {
const ast = parse(template.trim(), options)
optimize(ast, options)
const code = generate(ast, options)
return {
ast,
render: code.render,
staticRenderFns: code.staticRenderFns
}
})关键函数说明
parse()：将模板解析为 ASToptimize()：标记静态节点generate()：生成渲染代码字符串createCompiler()：创建编译器实例compileToFunctions()：将模板编译为渲染函数
编译结果示例
输入模板：
<div id="app">{{ message }}</div>输出渲染函数：
with(this){
return _c('div',{attrs:{"id":"app"}},[_v(_s(message))])
}其中 _c 是 createElement 的别名，_v 创建文本节点，_s 转换为字符串。
