vue compile实现原理
Vue 编译实现原理
Vue 的模板编译过程将模板字符串转换为渲染函数，主要分为解析、优化和生成三个阶段。
解析阶段
模板字符串通过正则表达式和状态机被解析为抽象语法树（AST）。解析器逐字符扫描模板，识别标签、属性、文本等内容，构建节点树结构。
// 示例：解析 div 标签
const ast = {
type: 1, // 元素节点
tag: 'div',
attrsList: [{ name: 'id', value: 'app' }],
children: []
}优化阶段
遍历 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])
}
}
}生成阶段
将优化后的 AST 转换为可执行的渲染函数代码字符串。通过递归遍历 AST，生成形如 _c('div', {...}) 的代码。
// 生成渲染函数代码
function generate(ast) {
const code = ast ? `with(this){return ${genElement(ast)}}` : '_c("div")'
return {
render: new Function(code),
staticRenderFns: []
}
}核心编译函数
Vue 通过 compileToFunctions 方法完成整体编译流程：
function compileToFunctions(template) {
const ast = parse(template.trim())
optimize(ast)
const code = generate(ast)
return {
render: new Function(`with(this){return ${code.render}}`),
staticRenderFns: code.staticRenderFns.map(fn => new Function(fn))
}
}运行时编译与预编译
开发环境使用包含编译器的完整版 Vue（运行时+编译器），生产环境推荐预编译模板为渲染函数。预编译通过 vue-loader 等工具实现，可减少包体积约 30%。
编译优化策略
- 静态提升：将静态节点提取到渲染函数外部，避免重复创建
- 预字符串化：将连续静态内容合并为字符串
- 缓存事件处理函数
- 区块树优化：基于动态节点切割模板区块
这种分层编译架构使 Vue 能在保持灵活性的同时，通过编译时优化提升运行时性能。
