Vue模板是如何编译的？

发表于 | 分类于

Vue模板是如何编译的？

Tags: 编译
关键词: 如何得到 render function
创建时间: May 31, 2022

1
2
3
new Vue({
	render: h => h(App)
})

调用render方法会得到传入的模板(.vue文件)对应的虚拟 DOM，render 方法有两种来源

  • 第一种经过模板编译后生成 render 函数;
  • 第二种是我们自己在组件定义了 render 函数，这种方式会跳过模板编译过程;

模板编译

Untitled

模板编译的结果就是得到render函数

模板编译的结果就是得到render函数

如何将 vue文件的 template 模板编译成浏览器认识的 HTML？

  1. 提取出模板中原生的 HTML 和非原生的 HTML，比如绑定的属性、事件、指令；
  2. 经过一系列处理生成 render 函数；
  3. render 函数执行将模板内容生成对应的 vnode；
  4. 再经过 patch 过程（diff算法）得到要渲染到视图中的 vnode；

编译流程，主要有三步：

  1. 模板解析：通过正则等方式将 template 模板里的标签元素、属性、变量等信息，解析成抽象语法树 **AST（parse）**；
  2. 优化：遍历 AST 找出其中的静态节点和静态根节点，并添加标记；（**optimize**）
  3. 代码生成：根据 AST 生成渲染函数 **render （generate）**

**parse(ast) ⇒ optimize(ast) ⇒ generate(code) ⇒ render(code.render)**

总结🔥

如果想要将 vue 的模板文件渲染到真实的 html上，需要将模板文件转为vnode，在经过 patch（diff算法）挂载到真实dom；

如何得到 vnode 呢？需要通过调用 render 方法。

render 有两种，一种是经过 vue 编译器通过模板编译的方式得到，另一种是用户自定义的 render function。

通过编译得到 render function 的流程：

  • parse 解析 template 文件，通过正则匹配等方法，得到ast语法树；
  • optimize 优化 ast 语法树，做静态标记；
  • generate 代码生成，将 ast 语法树转为 code，其中也得到了render 方法；