Vue中虚拟DOM创建到挂载的过程
Vue中虚拟DOM创建到挂载的过程
流程概括下来基本上就是：模板 → AST → render函数 → 虚拟节点 → 挂载
AST：抽象语法树，它用于记录原始代码中所有的关键信息，根据AST可以将代码从一种语言转化为另一种语言。
虚拟DOM创建到挂载
-
根据模板创建抽象语法树AST
这里仅仅得到的是模板语法的原始解构，里面可能会有比如v-if，v-for这种指令。需要进一步转换。
-
然后进行转换
- 解析v-if、v-for等命令
- 有些静态内容，可以在编译时候提取出来，减少运行时的工作量
-
调用generate，接收抽象语法树，生成render函数
-
执行render函数可以生成一个虚拟节点
虚拟节点中，type代表结点类型（如：div）、props代表节点属性、children代表该节点的子结点。
-
调用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的编译时和运行时发挥桥梁作用