01- vdom 和模板编译源码

组件渲染的过程

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