vue模版编译详情

目录

• 1、parse 解析器
• 1.1 截取的规则
• 1.2  截取过程部分
• 1.3  解析器总结
• 2、optimize 优化器
• 2.1 静态节点
• 2.2 静态根节点
• 2.3 优化器总结
• 3、generate 代码生成器
• 3.1 JS的with语法

思考：

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

解析：

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

1、parse 解析器

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

模板字符串：

   
{{message}}

element ASTs

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时，对象会包含的表达式
          expression: "_s(message)"
      }]
    }
  ]
}

1.1 截取的规则

主要是通过判断模板中html.indexof('<')的值，来确定要截取标签还是文本.

截取的过程：

字符串部分

`
{{message}}
`

1.2  截取过程部分

第一次截取

• 判断模板中html.indexof('<')的值, 为零 (注释、条件注释、doctype、开始标签、结束标签中的一种)
• 被起始标签的正则匹配成功，获取当前的标签名为div，然后截掉匹配成功的'

  {{message}}

截取掉开始标签后，会使用匹配属性的正则去匹配，如果匹配成功，则得到该标签的属性列表，如果匹配不成功，则该标签的属性列表为空数组

截掉属性后，会使用匹配开始标签结束的正则去匹配，得到它是否是自闭合标签的信息，然后截掉匹配到的字符串得到新的字符串

{{message}}




匹配到开始标签，判断当前节点是否存在根节点，不存在则会创建一个元素类型的树节点，存在，则将其设置为currentParent的子节点，然后将当前节点压入stack栈中

/**
   总结为，匹配标签，提取属性，建立层级
*/
// 经过上面的匹配，剩下的字符串部分为：
`
{{message}}

`

第二次截取

/**
    同上
*/
// 经过上面的匹配，剩下的字符串部分为：
`{{message}}

`