聊聊Vue.js的template编译的问题
写在前面
因为对vue.js很感兴趣，而且平时工作的技术栈也是vue.js，这几个月花了些时间研究学习了一下vue.js源码，并做了总结与输出。
文章的原地址：https://github.com/answershuto/learnvue。
在学习过程中，为vue加上了中文的注释https://github.com/answershuto/learnvue/tree/master/vue-src，希望可以对其他想学习vue源码的小伙伴有所帮助。
可能会有理解存在偏差的地方，欢迎提issue指出，共同学习，共同进步。
$mount
首先看一下mount的代码
/*把原本不带编译的$mount方法保存下来，在最后会调用。*/
const mount = vue.prototype.$mount
/*挂载组件，带模板编译*/
vue.prototype.$mount = function (
el?: string | element,
hydrating?: boolean
): component {
el = el && query(el)
/* istanbul ignore if */
if (el === document.body || el === document.documentelement) {
process.env.node_env !== 'production' && warn(
`do not mount vue to <html> or <body> - mount to normal elements instead.`
)
return this
}
const options = this.$options
// resolve template/el and convert to render function
/*处理模板templete，编译成render函数，render不存在的时候才会编译template，否则优先使用render*/
if (!options.render) {
let template = options.template
/*template存在的时候取template，不存在的时候取el的outerhtml*/
if (template) {
/*当template是字符串的时候*/
if (typeof template === 'string') {
if (template.charat(0) === '#') {
template = idtotemplate(template)
/* istanbul ignore if */
if (process.env.node_env !== 'production' && !template) {
warn(
`template element not found or is empty: ${options.template}`,
this
)
}
}
} else if (template.nodetype) {
/*当template为dom节点的时候*/
template = template.innerhtml
} else {
/*报错*/
if (process.env.node_env !== 'production') {
warn('invalid template option:' + template, this)
}
return this
}
} else if (el) {
/*获取element的outerhtml*/
template = getouterhtml(el)
}
if (template) {
/* istanbul ignore if */
if (process.env.node_env !== 'production' && config.performance && mark) {
mark('compile')
}
/*将template编译成render函数，这里会有render以及staticrenderfns两个返回，这是vue的编译时优化，static静态不需要在vnode更新时进行patch，优化性能*/
const { render, staticrenderfns } = compiletofunctions(template, {
shoulddecodenewlines,
delimiters: options.delimiters
}, this)
options.render = render
options.staticrenderfns = staticrenderfns
/* istanbul ignore if */
if (process.env.node_env !== 'production' && config.performance && mark) {
mark('compile end')
measure(`${this._name} compile`, 'compile', 'compile end')
}
}
}
/*github:https://github.com/answershuto*/
/*调用const mount = vue.prototype.$mount保存下来的不带编译的mount*/
return mount.call(this, el, hydrating)
}
通过mount代码我们可以看到，在mount的过程中，如果render函数不存在（render函数存在会优先使用render）会将template进行compiletofunctions得到render以及staticrenderfns。譬如说手写组件时加入了template的情况都会在运行时进行编译。而render function在运行后会返回vnode节点，供页面的渲染以及在update的时候patch。接下来我们来看一下template是如何编译的。
一些基础
首先，template会被编译成ast语法树，那么ast是什么？
在计算机科学中，抽象语法树（abstract syntax tree或者缩写为ast），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。
ast会经过generate得到render函数，render的返回值是vnode，vnode是vue的虚拟dom节点，具体定义如下：
export default class vnode {
tag: string | void;
data: vnodedata | void;
children: ?array<vnode>;
text: string | void;
elm: node | void;
ns: string | void;
context: component | void; // rendered in this component's scope
functionalcontext: component | void; // only for functional component root nodes
key: string | number | void;
componentoptions: vnodecomponentoptions | void;
componentinstance: component | void; // component instance
parent: vnode | void; // component placeholder node
raw: boolean; // contains raw html? (server only)
isstatic: boolean; // hoisted static node
isrootinsert: boolean; // necessary for enter transition check
iscomment: boolean; // empty comment placeholder?
iscloned: boolean; // is a cloned node?
isonce: boolean; // is a v-once node?
/*github:https://github.com/answershuto*/
constructor (
tag?: string,
data?: vnodedata,
children?: ?array<vnode>,
text?: string,
elm?: node,
context?: component,
componentoptions?: vnodecomponentoptions
) {
/*当前节点的标签名*/
this.tag = tag
/*当前节点对应的对象，包含了具体的一些数据信息，是一个vnodedata类型，可以参考vnodedata类型中的数据信息*/
this.data = data
/*当前节点的子节点，是一个数组*/
this.children = children
/*当前节点的文本*/
this.text = text
/*当前虚拟节点对应的真实dom节点*/
this.elm = elm
/*当前节点的名字空间*/
this.ns = undefined
/*编译作用域*/
this.context = context
/*函数化组件作用域*/
this.functionalcontext = undefined
/*节点的key属性，被当作节点的标志，用以优化*/
this.key = data && data.key
/*组件的option选项*/
this.componentoptions = componentoptions
/*当前节点对应的组件的实例*/
this.componentinstance = undefined
/*当前节点的父节点*/
this.parent = undefined
/*简而言之就是是否为原生html或只是普通文本，innerhtml的时候为true，textcontent的时候为false*/
this.raw = false
/*静态节点标志*/
this.isstatic = false
/*是否作为跟节点插入*/
this.isrootinsert = true
/*是否为注释节点*/
this.iscomment = false
/*是否为克隆节点*/
this.iscloned = false
/*是否有v-once指令*/
this.isonce = false
}
// deprecated: alias for componentinstance for backwards compat.
/* istanbul ignore next */
get child (): component | void {
return this.componentinstance
}
}
关于vnode的一些细节，请参考vnode节点。
createcompiler
createcompiler用以创建编译器，返回值是compile以及compiletofunctions。compile是一个编译器，它会将传入的template转换成对应的ast树、render函数以及staticrenderfns函数。而compiletofunctions则是带缓存的编译器，同时staticrenderfns以及render函数会被转换成funtion对象。
因为不同平台有一些不同的options，所以createcompiler会根据平台区分传入一个baseoptions，会与compile本身传入的options合并得到最终的finaloptions。
compiletofunctions
首先还是贴一下compiletofunctions的代码。
/*带缓存的编译器，同时staticrenderfns以及render函数会被转换成funtion对象*/
function compiletofunctions (
template: string,
options?: compileroptions,
vm?: component
): compiledfunctionresult {
options = options || {}
/* istanbul ignore if */
if (process.env.node_env !== 'production') {
// detect possible csp restriction
try {
new function('return 1')
} catch (e) {
if (e.tostring().match(/unsafe-eval|csp/)) {
warn(
'it seems you are using the standalone build of vue.js in an ' +
'environment with content security policy that prohibits unsafe-eval. ' +
'the template compiler cannot work in this environment. consider ' +
'relaxing the policy to allow unsafe-eval or pre-compiling your ' +
'templates into render functions.'
)
}
}
}
/*github:https://github.com/answershuto*/
// check cache
/*有缓存的时候直接取出缓存中的结果即可*/
const key = options.delimiters
? string(options.delimiters) + template
: template
if (functioncompilecache[key]) {
return functioncompilecache[key]
}
// compile
/*编译*/
const compiled = compile(template, options)
// check compilation errors/tips
if (process.env.node_env !== 'production') {
if (compiled.errors && compiled.errors.length) {
warn(
`error compiling template:\n\n${template}\n\n` +
compiled.errors.map(e => `- ${e}`).join('\n') + '\n',
vm
)
}
if (compiled.tips && compiled.tips.length) {
compiled.tips.foreach(msg => tip(msg, vm))
}
}
// turn code into functions
const res = {}
const fngenerrors = []
/*将render转换成funtion对象*/
res.render = makefunction(compiled.render, fngenerrors)
/*将staticrenderfns全部转化成funtion对象 */
const l = compiled.staticrenderfns.length
res.staticrenderfns = new array(l)
for (let i = 0; i < l; i++) {
res.staticrenderfns[i] = makefunction(compiled.staticrenderfns[i], fngenerrors)
}
// check function generation errors.
// this should only happen if there is a bug in the compiler itself.
// mostly for codegen development use
/* istanbul ignore if */
if (process.env.node_env !== 'production') {
if ((!compiled.errors || !compiled.errors.length) && fngenerrors.length) {
warn(
`failed to generate render function:\n\n` +
fngenerrors.map(({ err, code }) => `${err.tostring()} in\n\n$[code]\n`).join('\n'),
vm
)
}
}
/*存放在缓存中，以免每次都重新编译*/
return (functioncompilecache[key] = res)
}
我们可以发现，在闭包中，会有一个functioncompilecache对象作为缓存器。
/*作为缓存，防止每次都重新编译*/
const functioncompilecache: {
[key: string]: compiledfunctionresult;
} = object.create(null)
在进入compiletofunctions以后，会先检查缓存中是否有已经编译好的结果，如果有结果则直接从缓存中读取。这样做防止每次同样的模板都要进行重复的编译工作。
// check cache
/*有缓存的时候直接取出缓存中的结果即可*/
const key = options.delimiters
? string(options.delimiters) + template
: template
if (functioncompilecache[key]) {
return functioncompilecache[key]
}
在compiletofunctions的末尾会将编译结果进行缓存
/*存放在缓存中，以免每次都重新编译*/ return (functioncompilecache[key] = res)
compile
/*编译，将模板template编译成ast树、render函数以及staticrenderfns函数*/
function compile (
template: string,
options?: compileroptions
): compiledresult {
const finaloptions = object.create(baseoptions)
const errors = []
const tips = []
finaloptions.warn = (msg, tip) => {
(tip ? tips : errors).push(msg)
}
/*做下面这些merge的目的因为不同平台可以提供自己本身平台的一个baseoptions，内部封装了平台自己的实现，然后把共同的部分抽离开来放在这层compiler中，所以在这里需要merge一下*/
if (options) {
// merge custom modules
/*合并modules*/
if (options.modules) {
finaloptions.modules = (baseoptions.modules || []).concat(options.modules)
}
// merge custom directives
if (options.directives) {
/*合并directives*/
finaloptions.directives = extend(
object.create(baseoptions.directives),
options.directives
)
}
// copy other options
for (const key in options) {
/*合并其余的options，modules与directives已经在上面做了特殊处理了*/
if (key !== 'modules' && key !== 'directives') {
finaloptions[key] = options[key]
}
}
}
/*基础模板编译，得到编译结果*/
const compiled = basecompile(template, finaloptions)
if (process.env.node_env !== 'production') {
errors.push.apply(errors, detecterrors(compiled.ast))
}
compiled.errors = errors
compiled.tips = tips
return compiled
}
compile主要做了两件事，一件是合并option（前面说的将平台自有的option与传入的option进行合并），另一件是basecompile，进行模板template的编译。
来看一下basecompile
basecompile
function basecompile (
template: string,
options: compileroptions
): compiledresult {
/*parse解析得到ast树*/
const ast = parse(template.trim(), options)
/*
将ast树进行优化
优化的目标：生成模板ast树，检测不需要进行dom改变的静态子树。
一旦检测到这些静态树，我们就能做以下这些事情：
1.把它们变成常数，这样我们就再也不需要每次重新渲染时创建新的节点了。
2.在patch的过程中直接跳过。
*/
optimize(ast, options)
/*根据ast树生成所需的code（内部包含render与staticrenderfns）*/
const code = generate(ast, options)
return {
ast,
render: code.render,
staticrenderfns: code.staticrenderfns
}
}
basecompile首先会将模板template进行parse得到一个ast语法树，再通过optimize做一些优化，最后通过generate得到render以及staticrenderfns。
parse
parse的源码可以参见https://github.com/answershuto/learnvue/blob/master/vue-src/compiler/parser/index.js#l53。
parse会用正则等方式解析template模板中的指令、class、style等数据，形成ast语法树。
optimize
optimize的主要作用是标记static静态节点，这是vue在编译过程中的一处优化，后面当update更新界面时，会有一个patch的过程，diff算法会直接跳过静态节点，从而减少了比较的过程，优化了patch的性能。
generate
generate是将ast语法树转化成render funtion字符串的过程，得到结果是render的字符串以及staticrenderfns字符串。
至此，我们的template模板已经被转化成了我们所需的ast语法树、render function字符串以及staticrenderfns字符串。
举个例子
来看一下这段代码的编译结果
<div class="main" :class="bindclass">
<div>{{text}}</div>
<div>hello world</div>
<div v-for="(item, index) in arr">
<p>{{item.name}}</p>
<p>{{item.value}}</p>
<p>{{index}}</p>
<p>---</p>
</div>
<div v-if="text">
{{text}}
</div>
<div v-else></div>
</div>
转化后得到ast树，如下图：
我们可以看到最外层的div是这颗ast树的根节点，节点上有许多数据代表这个节点的形态，比如static表示是否是静态节点，staticclass表示静态class属性（非bind:class）。children代表该节点的子节点，可以看到children是一个长度为4的数组，里面包含的是该节点下的四个div子节点。children里面的节点与父节点的结构类似，层层往下形成一棵ast语法树。
再来看看由ast得到的render函数
with(this){
return _c( 'div',
{
/*static class*/
staticclass:"main",
/*bind class*/
class:bindclass
},
[
_c( 'div', [_v(_s(text))]),
_c('div',[_v("hello world")]),
/*这是一个v-for循环*/
_l(
(arr),
function(item,index){
return _c( 'div',
[_c('p',[_v(_s(item.name))]),
_c('p',[_v(_s(item.value))]),
_c('p',[_v(_s(index))]),
_c('p',[_v("---")])]
)
}
),
/*这是v-if*/
(text)?_c('div',[_v(_s(text))]):_c('div',[_v("no text")])],
2
)
}
_c，_v，_s，_q
看了render function字符串，发现有大量的_c，_v，_s，_q，这些函数究竟是什么？
带着问题，我们来看一下core/instance/render。
/*处理v-once的渲染函数*/ vue.prototype._o = markonce /*将字符串转化为数字，如果转换失败会返回原字符串*/ vue.prototype._n = tonumber /*将val转化成字符串*/ vue.prototype._s = tostring /*处理v-for列表渲染*/ vue.prototype._l = renderlist /*处理slot的渲染*/ vue.prototype._t = renderslot /*检测两个变量是否相等*/ vue.prototype._q = looseequal /*检测arr数组中是否包含与val变量相等的项*/ vue.prototype._i = looseindexof /*处理static树的渲染*/ vue.prototype._m = renderstatic /*处理filters*/ vue.prototype._f = resolvefilter /*从config配置中检查eventkeycode是否存在*/ vue.prototype._k = checkkeycodes /*合并v-bind指令到vnode中*/ vue.prototype._b = bindobjectprops /*创建一个文本节点*/ vue.prototype._v = createtextvnode /*创建一个空vnode节点*/ vue.prototype._e = createemptyvnode /*处理scopedslots*/ vue.prototype._u = resolvescopedslots /*创建vnode节点*/ vm._c = (a, b, c, d) => createelement(vm, a, b, c, d, false)
通过这些函数，render函数最后会返回一个vnode节点，在_update的时候，经过patch与之前的vnode节点进行比较，得出差异后将这些差异渲染到真实的dom上。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 详解Nodejs 通过 fs.createWriteStream 保存文件
下一篇： 【HTML、CSS教科书】一个搞后端的Java程序员就需要学HTML、CSS吗？答案是需要！（HTML、CSS知识总结）
推荐阅读