模板编译之入口分析

我们紧接着看 $mount 方法，他的主要作用就是将传入的元素（ el ）或模板（ template）编译为渲染函数（ render ），下面我们详细展开

$mount 的不同版本

• **运行时版本 ( Runtime-Only )**在纯运行时版本中，Vue 依赖于预编译好的渲染函数（render ），而不会进行模板编译

  // src\platforms\web\runtime\index.jsVue.prototype.$mount = function (el, hydrating) { // 挂载...return mountComponent(this, el, hydrating)
  };
  

• **包含编译器的版本 (Runtime+Compiler)**在包含编译器的版本中，Vue 需要处理从模板到渲染函数的编译过程。这需要对 $mount 方法进行扩展

  // src\platforms\web\entry-runtime-with-compiler.jsvar mount = Vue.prototype.$mount; // 备份原始 $mount 方法Vue.prototype.$mount = function (el, hydrating) {/* 模板编译 */return mount.call(this, el, hydrating)
  };
  

compileToFunctions 是 Vue 中用于将模板字符串编译为渲染函数的关键方法。这个方法的实现涉及多个步骤，包括解析模板、优化生成的抽象语法树 ( AST )，以及生成最终的渲染函数。下面我们逐步解析 compileToFunctions 的实现过程

compileToFunctions 方法

首先调用 createCompiler 方法，传入基础编译选项 baseOptions，创建一个编译器实例，然后compileToFunctions 方法是从 createCompiler 方法调用结果的返回值中解构出来的

// src\platforms\web\compiler\options.js// 编译器的基础选项
var baseOptions = {expectHTML: true, // 表示预期输入的模板是否为 HTMLmodules: modules$1, // 用于处理特定的功能或特性的模块数组 (class/style/v-model)directives: directives$1, // 对特殊指令的处理函数 (v-model/v-text/v-html)isPreTag: isPreTag, // 用于判断是否为 <pre> 标签isUnaryTag: isUnaryTag, // 用于判断是否为自闭合标签mustUseProp: mustUseProp, // 用于判断在给定的标签上绑定属性是否必须使用 prop 进行绑定canBeLeftOpenTag: canBeLeftOpenTag, // 用于判断给定的标签是否可以不闭合isReservedTag: isReservedTag, // 用于判断是否是平台保留标签getTagNamespace: getTagNamespace, // 用于获取标签的命名空间staticKeys: genStaticKeys(modules$1) // 用于生成静态键的列表 (优化渲染性能)
};...// src\platforms\web\compiler\index.jsvar { compile, compileToFunctions } = createCompiler(baseOptions);

createCompiler 方法

紧接着看 createCompiler 方法的定义 我们发现 createCompiler 方法又是从 createCompilerCreator 方法调用结果的返回值中解构出来的，并且传入了 baseCompile 函数作为参数，而该函数便是模板编译中最核心最重要的编译方法，它通过下列三个步骤完成了模板从字符串到渲染函数的转换过程

• parse（解析）：将模板字符串解析为 AST
• optimize（优化）：标记 AST 中的静态节点，减少运行时需要处理的动态节点
• generate（生成）：将优化后的 AST 转换为渲染函数代码

// src\compiler\index.jsvar createCompiler = createCompilerCreator(function baseCompile (template, options) {// 将模板字符串解析为 ASTvar ast = parse(template.trim(), options);// 对 AST 进行优化optimize(ast, options);// 将 AST 转换为渲染函数代码var code = generate(ast, options);return {ast: ast,render: code.render,staticRenderFns: code.staticRenderFns}
});

createCompilerCreator 方法

然后继续看 createCompilerCreator 方法做了哪些事情 通过观察代码，我们知道了 createCompilerCreator 方法是创建编译器的工厂函数 调用 createCompilerCreator 方法并传入最核心的编译方法 baseCompile 后返回 createCompiler 函数，而该函数便是在获取 compile 以及 compileToFunctions 方法时候调用的那个创建编译器实例的方法

// src\platforms\web\compiler\index.jsvar { compile, compileToFunctions } = createCompiler(baseOptions);

// src\compiler\create-compiler.jsfunction createCompilerCreator (baseCompile) {return function createCompiler (baseOptions) { // 创建编译器实例function compile (template, options) {// 编译模板var compiled = baseCompile(template.trim(), finalOptions);return compiled}return {// 将模板字符串编译为渲染函数代码compile: compile,// 将模板字符串编译为渲染函数compileToFunctions: createCompileToFunctionFn(compile)}}
}

createCompileToFunctionFn 方法

在 createCompiler 函数的调用结果中返回 compileToFunctions 函数的时候，我们发现 compileToFunctions 函数是 createCompileToFunctionFn 函数调用的返回结果。因此，我们最后再去了解一下该函数

// src\compiler\create-compiler.jsreturn {compile: compile,compileToFunctions: createCompileToFunctionFn(compile)
}

该函数主要在编译过程中，对错误发出提示信息以及对编译结果进行缓存 该函数的重点是调用了 compile 方法，然后 compile 调用了最核心的编译方法 baseCompile

// src\compiler\to-function.jsfunction createCompileToFunctionFn (compile) {return function compileToFunctions (template, options, vm) {var compiled = compile(template, options); // 编译模板...return (cache[key] = res) // 返回并缓存编译结果}
}