Vue 3 模板编译器与有限状态机原理

Vue 3 模板编译器核心流程

Vue 3 模板编译主要由三大阶段构成：

Template 字符串
      │
      ▼ (Parse / 有限状态机 FSM)
  Template AST
      │
      ▼ (Transform / 插件管道)
JavaScript AST
      │
      ▼ (Codegen / 代码生成)
 Render Function Code

1. Parse 与有限状态机 (FSM)

词法分析器读取字符流输入，依据当前字符特征在不同状态之间转移：

• 遇到 <：进入标签开始状态
• 遇到 </：进入标签结束状态
• 遇到普通字符：进入文本解析状态
• 遇到 {{：进入插值解析状态

export function baseCompile(template: string) {
  const ast = baseParse(template);
  transform(
    ast,
    Object.assign({
      nodeTransforms: [transformExpression, transformElement, transformText],
    })
  );
  return generate(ast);
}