Vue中虚拟DOM创建到挂载的过程

Vue中虚拟DOM创建到挂载的过程

流程概括下来基本上就是：模板 → AST → render函数 → 虚拟节点 → 挂载

AST：抽象语法树，它用于记录原始代码中所有的关键信息，根据AST可以将代码从一种语言转化为另一种语言。

虚拟DOM创建到挂载

1. 根据模板创建抽象语法树AST

   这里仅仅得到的是模板语法的原始解构，里面可能会有比如v-if，v-for这种指令。需要进一步转换。

2. 然后进行转换

   • 解析v-if、v-for等命令
   • 有些静态内容，可以在编译时候提取出来，减少运行时的工作量

3. 调用generate，接收抽象语法树，生成render函数

   

4. 执行render函数可以生成一个虚拟节点

   虚拟节点中，type代表结点类型（如：div）、props代表节点属性、children代表该节点的子结点。

5. 调用patch函数，将虚拟节点挂载到容器中

   • patch内部通过hostCreateElement函数（相当于document.createElement()），根据虚拟dom中的type创建对应的dom元素
   • 然后通过hostInsert函数（相当于document.insertBefore()）将新创建的dom元素插入父节点中

这样就完成了从模板 → AST → render函数 → 虚拟节点的过程。

AST和虚拟DOM区别：

• 抽象语法树（AST）：模板编译阶段产物，负责将template模板转化为可执行的render函数
• 虚拟节点（VNode）：渲染阶段产物，由render函数生成，描述组件状态到DOM的映射关系

模板 → AST → render函数 → VNode树 → 真实DOM

简而言之：AST是编译阶段的代码结构解析器，VNode是运行时的动态渲染载体，二者分别在Vue的编译时和运行时发挥桥梁作用