(一)Vue模板编译
在Vue中我们有三种方式来创建HTML
- 模板
- 手动写渲染函数
- JSX
渲染函数是最原始的方法,而模板最终会通过编译转换陈渲染函数。渲染函数执行后,会得到一份vnode用来渲染真实DOM。所以,模板编译其实是配合虚拟DOM进行渲染。
1. 什么是模板编译?
所谓模板编译就是把模板编译成vnode的渲染函数。
2. 模板编译过程:
模板编译可以分为三个阶段:
-
将模板解析为AST(抽象语法树)—— 解析器
-
遍历AST,对 AST 进行静态节点标记,主要用来做虚拟DOM的渲染优化 —— 优化器
-
使用AST生成render函数代码字符串—— 代码生成器
关于模板编译的源码可以在vue-template-compiler
包中查看。
(二)Vue虚拟DOM
1. Virtual DOM
概念:
Virtual DOM是一个能够直接描述一段HTML DOM结构的JavaScript对象,浏览器可以根据它的结构按照一定规则创建出确定唯一的HTML