mark('compile end');
measure(((this._name) + " compile"), 'compile', 'compile end');
}
}
}
return mount.call(this, el, hydrating)
};
忽略2段dev模式下的提示代码，剩下的代码做了3件事，调用compileToFunctions函数肢解DOM树字符串，将返回的对象属性添加到options上，再次调用mount函数。
首先看一下compileToFunctions函数，该函数接受3个参数，分别为字符串、配置对象、当前vue实例。
由于函数比较长，而且部分是错误判断，简化后如下：
// Line-9326
function compileToFunctions(template,options,vm) {
// 获取配置参数
options = options || {}; // ...
var key = options.delimiters ?
String(options.delimiters) + template :
template;
// 检测缓存
if (functionCompileCache[key]) {
return functionCompileCache[key] }
// 1
var compiled = compile(template, options);
// ...
// 2
var res = {};
var fnGenErrors = [];
res.render = makeFunction(compiled.render, fnGenErrors);
var l = compiled.staticRenderFns.length;
res.staticRenderFns = new Array(l);
for (var i = 0; i < l; i++) {
res.staticRenderFns[i] = makeFunction(compiled.staticRenderFns[i], fnGenErrors);
}
// ...
// 3
return (functionCompileCache[key] = res)
}
可以看到，这个函数流程可以分为4步，获取参数 => 调用compile函数进行编译 => 将得到的compiled转换为函数 => 返回并缓存。
第一节现在这样吧。一张图总结下：
