你真的了解vue模版编译么？

前述

本文的初衷是想让更多的同学知道并了解vue模版编译，所以文中主要以阶段流程为主，不会涉及过多的底层代码逻辑，请耐心观看。

思考

html是标签语言，只有JS才能实现判断、循环，而模版有指令、插值、JS表达式，能够实现判断、循环等，故模板不是html，因此模板一定是转换为某种JS代码，这种编译又是如何进行的？

解析

模版编译是将template编译成render函数的过程，这个过程大致可以分成三个阶段：

模版编译 vue2.0.png

阶段

parse 解析器

解析器主要就是将 模板字符串 转换成 element ASTs

模板字符串

<div>
   <p>{
   {message}}</p>
</div>

element ASTs^[1]

AST是指抽象语法树 和 Vnode 类似，都是使用JavaScript对象来描述节点的树状表现形式

{
  tag: "div"
  // 节点的类型（1标签，2包含字面量表达式的文本节点，3普通文本节点或注释节点）
  type: 1,
  // 静态根节点
  staticRoot: false,
  // 静态节点
  static: false,
  plain: true,
  // 父节点元素描述对象的引用
  parent: undefined,
  // 只有当节点类型为1，才会有attrsList属性，它是一个对象数组，存储着原始的html属性名和值
  attrsList: [],
  // 同上，区别是attrsMap是以键值对的方式保存html属性名和值的
  attrsMap: {},
  // 存储着该节点所有子节点的元素描述对象
  children: [
      {
      tag: "p"
      type: 1,
      staticRoot: false,
      static: false,
      plain: true,
      parent: {tag: "div", ...},
      attrsList: [],
      attrsMap: {},
      children: [{
          type: 2,
          text: "{
   {message}}",
          static: false,
          // 当节点类型为2时，对象会包含的表达式
          expressi