createCompilerCreator 函数只有一个作用，利用偏函数将 baseCompile 基础编译方法缓存，并返回一个编译器函数，该函数内部定义了真正执行编译的 compile 方法，并最终将 compile 和 compileToFunctons 作为两个对象属性返回，这也是 compileToFunctions 的来源。而内部 compile 的作用，是为了将基础的配置 baseOptions 和用户自定义的配置 options 进行合并，( baseOptions 是跟外部平台相关的配置)，最终返回合并配置后的 baseCompile 编译方法。
compileToFunctions 来源于 createCompileToFunctionFn 函数的返回值，该函数会将编译的方法 compile 作为参数传入。
function createCompileToFunctionFn (compile) { var cache = Object.create(null); return function compileToFunctions (template,options,vm) { options = extend({}, options); ··· // 缓存的作用：避免重复编译同个模板造成性能的浪费 if (cache[key]) { return cache[key] } // 执行编译方法 var compiled = compile(template, options); ··· // turn code into functions var res = {}; var fnGenErrors = []; // 编译出的函数体字符串作为参数传递给createFunction,返回最终的render函数 res.render = createFunction(compiled.render, fnGenErrors); // 渲染优化相关 res.staticRenderFns = compiled.staticRenderFns.map(function (code) { return createFunction(code, fnGenErrors) }); ··· return (cache[key] = res) } }
最终，我们找到了 compileToFunctions 真正的执行过程 var compiled = compile(template, options); ,并将编译后的函数体字符串通过 creatFunction 转化为 render 函数返回。
function createFunction (code, errors) { try { return new Function(code) } catch (err) { errors.push({ err: err, code: code }); return noop } }
其中函数体字符串类似于 "with(this){return _m(0)}" ,最终的render渲染函数为 function(){with(this){return _m(0)}}
至此，Vue中关于编译过程的思路也梳理清楚了，编译逻辑之所以绕，主要是因为Vue在不同平台有不同的编译过程，而每个编译过程的 baseOptions 选项会有所不同，同时在同一个平台下又不希望每次编译时传入相同的 baseOptions 参数，因此在 createCompilerCreator 初始化编译器时便传入参数，并利用偏函数将配置进行缓存。同时剥离出编译相关的合并配置，这些都是Vue在编译这块非常巧妙的设计。
总结
以上所述是小编给大家介绍的Vue源码实例挂载与编译流程,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: