组件渲染的过程
template --> ast --> render --> vDom --> 真实的Dom --> 页面
Runtime-Compiler和Runtime-Only的区别 - 简书
编译步骤
模板编译是Vue中比较核心的一部分。关于 Vue 编译原理这块的整体逻辑主要分三个部分,也可以说是分三步,前后关系如下:
第一步:将模板字符串转换成element ASTs( 解析器 parse)第二步:对 AST 进行静态节点标记,主要用来做虚拟DOM的渲染优化(优化器 optimize)
第三步:使用element ASTs生成render函数代码字符串(代码生成器 generate)
编译后的AST结构
template 模板:
<div class="box">
<p>{
{name}}</p>
</div>
AST 抽象语法树:
ast: {
tag: "div" // 元素标签名
type: 1, // 元素节点类型 1标签 2包含字面量表达式的文本节点 3普通文本节点或注释节点
staticRoot: false, // 是否静态根节点
static: false, // 是否静态节点
plain: true,
parent: undefined,
attrsList: [], // 标签节点的属性名和值的对象集合
attrsMap: {}, // 和attrsList类似,不同在它是以键值对保存属性名和值
children: [
{
tag: "p"
type: 1,
staticRoot: false,
static: false,
plain: true,
parent: {tag: "div", ...},
attrsList: [],
attrsMap: {},
children: [{
type: 2,
text: "{
{name}}",
static: false,
expression: "_s(name)" // type为2时才有这个属性,表示表达式的内容
}]
}
]
}
generate,将AST转换成可以直接执行的JavaScript字符串
with(this) {
return _c('div', [_c('p', [_v(_s(name))]), _v(" "), _m(0)])
}
注意一:平常开发中 我们使用的是不带编译版本的 Vue 版本(runtime-only)直接在 options 传入 template 选项 在开发环境报错
注意二:这里传入的 template 选项不要和.vue 文件里面的模板搞混淆了 vue 单文件组件的 template 是需要 vue-loader