template 是如何编译的

# template 是如何编译的

  1. 第一步实例化一个 vue 项目
  2. 模版编译实在是在 vue 生命周期的 mounted 阶段执行的
  3. 在 mounted 阶段的时候执行了 compile 方法将 template 里面的内容转换成真正的 html 代码;
  4. parse 阶段将 html 转换成 AST(抽象语法树),用来表示代码的数据结构,在 vue 中可以理解为嵌套的、携带标签名、属性和父子关系的 js 对象,用树来表现 DOM 结构;
  5. optimize(优化)会对 parse 生成的 AST 进行静态资源优化;
  6. generate 函数,会将每一个 AST 节点创建一个内部调用的方法等待后面的调用;
  7. 在 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
上次更新: 9/16/2020, 12:20:54 PM