【Vue2.x源码系列02】模版编译（AST、Optimize 、Render）
在Vue $mount过程中，我们需要把模版编译成render函数，整体实现可以分为三部分：
- parse：解析模版 template生成 AST语法树
- optimize： 优化 AST语法树，标记静态节点
- codegen： 把优化后的 AST语法树转换生成render方法代码字符串，利用模板引擎生成可执行的 render函数（ render执行后返回的结果就是虚拟DOM，即以 VNode节点作为基础的树 ）
Vue.js 提供了 2 个版本，一个是 Runtime + Compiler 的，一个是 Runtime only 的，前者是包含编译代码的，可以把编译过程放在运行时做，后者是不包含编译代码的，需要借助 webpack 的 vue-loader 事先把模板编译成 render函数。
下一章我们将介绍 render 和 patch 过程。关于 render函数如何生成虚拟DOM，以及如何将 vnode转化成真实DOM并挂载？
入口
Vue.prototype.$mount = function (el) {
...
// 这里需要对模板进行编译
const render = compileToFunction(template)
}
export function compileToFunction(template) {
// 1.解析模版template生成 AST语法树
let ast = parseHTML(template)
// 2.优化AST语法树，标记静态节点
optimize(ast)
// 3.把优化后的 AST语法树转换生成render方法代码字符串，利用模板引擎生成可执行的 render函数回的结果就是 虚拟DOM)
let code = codegen(ast)
code = `with(this){return ${code}}`
let render = new Function(code)
return render
}
parse
AST做的是语法层面的转化，就是用对象去描述语法本身，例如经过 parse过程后，对 html的描述如下
可以看到，生成的 AST 是一个树状结构，每一个节点都是一个 ast element，除了它自身的一些属性，还维护了它的父子关系，如 parent指向它的父节点，children指向它的所有子节点
我们也可以利用AST的可视化工具网站 - AST Exploer ，使用各种parse对代码进行AST转换
在 Vue的 $mount过程中，编译过程首先就是调用 parseHTML方法，解析 template模版，生成 AST语法树
在这个过程，我们会用到正则表达式对字符串解析，匹配开始标签、文本内容和闭合标签等
const ncname = `[a-zA-Z_][\\-\\.0-9_a-zA-Z]*`
const qnameCapture = `((?:${ncname}\\:)?${ncname})`
// 匹配的是 <xxx 第一个分组就是开始标签的名字
const startTagOpen = new RegExp(`^<${qnameCapture}`)
// 匹配的是 </xxxx> 第一个分组就是结束标签的名字
const endTag = new RegExp(`^<\\/${qnameCapture}[^>]*>`)
// 分组1: 属性的key 分组2: = 分组3/分组4/分组5: value值
const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/ // 匹配属性
const startTagClose = /^\s*(\/?)>/ // 匹配开始标签的结束 > 或 /> <div id = 'app' > <br/>
使用 while 循环html字符串，利用正则去匹配开始标签、文本内容和闭合标签，然后执行 advance方法将匹配到的内容在原html字符串中剔除，直到html字符串为空，结束循环
export function parseHTML(html) {
// 创建一颗抽象语法树
function createASTElement(tag, attrs) { }
// 处理开始标签，利用栈型结构来构造一颗树
function start(tag, attrs) { }
// 处理文本
function chars(text) { }
// 处理结束标签
function end(tag) { }
// 剔除 template 已匹配的内容
function advance(n) {
html = html.substring(n)
}
// 解析开始标签
function parseStartTag() {
const start = html.match(startTagOpen)
if (start) {
const match = {
tagName: start[1], // 标签名
attrs: [],
}
advance(start[0].length)
let attr, end
// 如果不是开始标签的结束 就一直匹配下去
while (!(end = html.match(startTagClose)) && (attr = html.match(attribute))) {
advance(attr[0].length)
match.attrs.push({ name: attr[1], value: attr[3] || attr[4] || attr[5] || true })
}
// 如果不是开始标签的结束
if (end) {
advance(end[0].length)
}
return match
}
return false
}
// 循环html字符串，直到其为空停止
while (html) {
// 如果textEnd = 0 说明是一个开始标签或者结束标签
// 如果textEnd > 0 说明就是文本的结束位置
let textEnd = html.indexOf('<')
if (textEnd == 0) {
// 开始标签的解析結果，包括 标签名 和 属性
const startTagMatch = parseStartTag()
if (startTagMatch) {
start(startTagMatch.tagName, startTagMatch.attrs)
continue
}
// 匹配结束标签
let endTagMatch = html.match(endTag)
if (endTagMatch) {
advance(endTagMatch[0].length)
end(endTagMatch[1])
continue
}
}
if (textEnd > 0) {
let text = html.substring(0, textEnd) // 截取文本内容
if (text) {
chars(text)
advance(text.length)
}
}
}
return root
}
当我们使用正则匹配到开始标签、文本内容和闭合标签时，分别执行start、chars、end方法去处理，利用 stack 栈型数据结构，最终构造一颗AST树，即root
- 匹配到开始标签时，就创建一个 ast元素，判断如果有 currentParent，会把当前 ast元素 push到 currentParent.chilldren 中，同时把 ast元素的 parent 指向 currentParent，ast元素入栈并更新 currentParent
- 匹配到文本时，就给 currentParent.children push一个文本 ast元素
- 匹配到结束标签时，就弹出栈中最后一个 ast元素，更新 currentParent
currentParent：指向的是栈中的最后一个 ast节点
注意：栈中的当前 ast节点永远是下一个 ast节点的父节点
const ELEMENT_TYPE = 1 // 元素类型
const TEXT_TYPE = 3 // 文本类型
const stack = [] // 用于存放元素的栈
let currentParent // 指向的是栈中的最后一个
let root
// 最终需要转化成一颗抽象语法树
function createASTElement(tag, attrs) {
return {
tag, // 标签名
type: ELEMENT_TYPE, // 类型
attrs, // 属性
parent: null,
children: [],
}
}
// 处理开始标签，利用栈型结构 来构造一颗树
function start(tag, attrs) {
let node = createASTElement(tag, attrs) // 创造一个 ast节点
if (!root) {
root = node // 如果root为空，则当前是树的根节点
}
if (currentParent) {
node.parent = currentParent // 只赋予了parent属性
currentParent.children.push(node) // 还需要让父亲记住自己
}
stack.push(node)
currentParent = node // currentParent为栈中的最后一个
}
// 处理文本
function chars(text) {
text = text.replace(/\s/g, '')
// 文本直接放到当前指向的节点中
if (text) {
currentParent.children.push({
type: TEXT_TYPE,
text,
parent: currentParent,
})
}
}
// 处理结束标签
function end(tag) {
stack.pop() // 弹出栈中最后一个ast节点
currentParent = stack[stack.length - 1]
}
当 AST 树构造完毕，下一步就是 optimize 优化这颗树
optimeize
当我们解析 template模版，生成 AST语法树之后，需要对这棵树进行 optimize优化，在编译阶段把一些 AST 节点优化成静态节点
深度遍历这个 AST 树，去检测它的每一颗子树是不是静态节点，如果是静态节点则标记 static: true
为什么要有优化过程，因为我们知道 Vue 是数据驱动，是响应式的，但是我们的模板并不是所有数据都是响应式的，也有很多数据是首次渲染后就永远不会变化的，那么这部分数据生成的 DOM 也不会变化，我们可以在 patch 的过程跳过对他们的比对，这对运行时对模板的更新起到极大的优化作用。
codegen
编译的最后一步就是把优化后的 AST树转换成可执行的 render代码。此过程包含两部分，第一部分是使用 codegen方法生成 render代码字符串，第二部分是利用模板引擎转换成可执行的 render代码
render方法代码字符串格式如下
_c: 执行 createElement创建虚拟节点；_v: 执行 createTextVNode创建文本虚拟节点；_s: 处理变量
我们会在Vue原型上扩展这些方法
让我们来实现一个简单的codegen方法，深度遍历AST树去生成render代码字符串
function codegen(ast) {
let children = genChildren(ast.children)
let code = `_c('${ast.tag}',${ast.attrs.length > 0 ? genProps(ast.attrs) : 'null'}${ast.children.length ? `,${children}` : ''})`
return code
}
// 根据ast语法树的 children对象 生成相对应的 children字符串
function genChildren(children) {
return children.map(child => gen(child)).join(',')
}
const defaultTagRE = /\{\{((?:.|\r?\n)+?)\}\}/g // 匹配到的内容就是我们表达式的变量，例如 {{ name }}
function gen(node) {
if (node.type === 1) { // 元素
return codegen(node)
} else { // 文本
let text = node.text
if (!defaultTagRE.test(text)) {
// _v('hello')
return `_v(${JSON.stringify(text)})`
} else {
//_v( _s(name) + 'hello' + _s(age))
... 拼接 _s
return `_v(${tokens.join('+')})`
}
}
}
// 根据ast语法树的 attrs属性对象 生成相对应的属性字符串
function genProps(attrs) {
let str = ''
for (let i = 0; i < attrs.length; i++) {
let attr = attrs[i]
str += `${attr.name}:${JSON.stringify(attr.value)},` // id:'app',class:'app-inner',
}
return `{${str.slice(0, -1)}}`
}
模板引擎的实现原理就是 with + new Function()，转换成可执行的函数，最终赋值给vm.options.render
let code = codegen(ast)
code = `with(this){return ${code}}`
let render = new Function(code)
尤大大亲自解读： Vue2模板编译为何使用with
with 的作用域和模板的作用域正好契合，可以极大地简化模板编译过程。用 with 代码量可以很少，而且把作用域的处理交给 js 引擎来做也更可靠
用 with 的主要副作用是生成的代码不能在 strict mode / ES module 中运行，但直接在浏览器里编译的时候因为用了 new Function()，等同于 eval，不受这一点影响
