Template模板编译为真实DOM的过程

Youky ... 2021-10-11 前端
  • Vue
Less than 1 minute

# Template模板编译为真实DOM的过程

# 1. parse

用正则的方式解析模板,得到模板中的标签、指令、class等数据,生成AST。

在这个过程中:

  • 会用一个栈存放已解析的开始标签。
    • 保持AST的层级关系
    • 判断标签是否正确闭合
  • 解析函数有四个钩子函数,分别对应:开始标签、结束标签、文本信息、注释信息。解析到对应内容时执行对应的钩子

# 2. optimize

标记静态节点,当后续update更新界面时,diff算法会直接跳过静态节点,达到优化性能的目的

# 3. generate

将AST转换为渲染虚拟DOM所需要的render function字符串

Last update: October 11, 2021 16:57
Contributors: youky7