template 是如何编译的
AprilTong
# template 是如何编译的
- 第一步实例化一个 vue 项目
- 模版编译实在是在 vue 生命周期的 mounted 阶段执行的
- 在 mounted 阶段的时候执行了 compile 方法将 template 里面的内容转换成真正的 html 代码;
- parse 阶段将 html 转换成 AST(抽象语法树),用来表示代码的数据结构,在 vue 中可以理解为嵌套的、携带标签名、属性和父子关系的 js 对象,用树来表现 DOM 结构;
- optimize(优化)会对 parse 生成的 AST 进行静态资源优化;
- generate 函数,会将每一个 AST 节点创建一个内部调用的方法等待后面的调用;
- 在 compile 过程结束后生成一个 render 字符串,在 new watcher 这个时候会对绑定的数据进行监听,render 函数就是数据监听的回调所调用,生成 vnode(虚拟 node),这个 render 函数字符串在第一次 mounted、或者绑定的数据更新时,都会被调用,生成 Vnode。如果是数据的更新,新的 vnode 会与数据改变之前的 vnode 做 diff,对内容做改动之后。就会更新到真正的 DOM 上。
// html <div id="test">123</div>
// 转换为AST
AST: {
type: 1,
tag: div,
attrsList: [
{
name: "id",
value: "test"
}
],
attrsMap: {id: "test"},
parent: undefined,
children: [
{
type: 3,
text: '123'
}
],
plain: true,
attrs: [
{
name: "id",
value: "test"
}
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27