Vue2模版编译(AST、Optimize 、Render)

2023-04-27,,

在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,不受这一点影响

参考文档

编译 | Vue.js 技术揭秘

Vue2模版编译(AST、Optimize 、Render)的相关教程结束。

《Vue2模版编译(AST、Optimize 、Render).doc》

下载本文的Word格式文档,以方便收藏与打印。