《Vue.js设计与实现》笔记 第17章：编译优化（Transform）

Vue.js设计与实现 第17章：编译优化（Transform）

本章目标

负责：

AST

↓

JS AST

---

作用：

分析AST

修改AST

优化AST

---

一、Transform是什么

编译器三阶段：

Parse

↓

Transform

↓

Generate

---

Transform负责：

把模板AST

转换成

JS AST

---

二、遍历AST

核心：

traverseNode(node)

---

遍历：

Root

↓

Element

↓

Text

---

三、深度优先遍历

顺序：

Root

↓

Element

↓

Text

---

属于：

DFS

---

四、Transform Context

保存：

{
 currentNode,
 parent,
 childIndex
}

---

方便：

替换节点

删除节点

---

五、节点转换器

例如：

transformElement()

transformText()

transformRoot()

---

六、退出阶段

Vue采用：

进入

↓

子节点

↓

退出

---

即：

Enter

Leave

---

七、JS AST

目标：

<div>Hello</div>

↓

h('div','Hello')

---

八、静态提升

Static Hoisting

---

静态节点：

<div>Hello</div>

---

提升：

const _hoisted_1

---

避免重复创建。

---

九、Patch Flag

标记：

动态节点

---

例如：

<div>{{msg}}</div>

↓

TEXT

---

十、Block Tree

收集：

动态节点

---

更新时：

只遍历动态部分

---

高频面试题

什么是Transform？

AST转换与优化阶段

---

静态提升作用？

减少VNode创建

---

PatchFlag作用？

定位动态内容

---

Block Tree作用？

减少Diff范围