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

$mount 的不同版本

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

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

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

  // src\platforms\web\entry-runtime-with-compiler.js
  
  var 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, // 表示预期输入的模板是否为 HTML
  modules: 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.js

var { compile, compileToFunctions } = createCompiler(baseOptions);

createCompiler 方法

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

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

// src\compiler\index.js

var createCompiler = createCompilerCreator(function baseCompile (template, options) {
  // 将模板字符串解析为 AST
  var 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.js

var { compile, compileToFunctions } = createCompiler(baseOptions);

// src\compiler\create-compiler.js

function 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.js

return {
  compile: compile,
  compileToFunctions: createCompileToFunctionFn(compile)
}

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

// src\compiler\to-function.js

function createCompileToFunctionFn (compile) {
  return function compileToFunctions (template, options, vm) {

    var compiled = compile(template, options); // 编译模板

    ...

    return (cache[key] = res) // 返回并缓存编译结果
  }
}