聊聊Vue.js的template编译

因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出。
文章的原地址:github.com/answershuto…
在学习过程中,为Vue加上了中文的注释https://github.com/answershuto/learnVue/tree/master/vue-src,希望可以对其他想学习Vue源码的小伙伴有所帮助。
可能会有理解存在偏差的地方,欢迎提issue指出,共同学习,共同进步。
$mount
首先看一下mount的代码
/把原本不带编译的mount
/挂载组件,带模板编译/
Vue.prototype.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: KaTeX parse error: Expected 'EOF', got '}' at position 28: …plate}, this ) }̲ } } else if (t…{this._name} compile, ‘compile’, ‘compile end’)
}
}
}
/Github:github.com/answershuto/
/调用const mount = Vue.prototype.KaTeX parse error: Expected 'EOF', got '}' at position 62: …el, hydrating) }̲ 通过mount代码我们可以看…{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 }) => KaTeX parse error: Expected 'EOF', got '\n' at position 20: ….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字符串。
举个例子
来看一下这段代码的编译结果

{{text}}
hello world

{{item.name}}
{{item.value}}
{{index}}

{{text}}

转化后得到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上。

作者:黎就是我
链接:https://juejin.im/post/5baa2703e51d450e6973644e
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值