Vue.js 提供了 2 个版本，一个是 Runtime + Compiler 的，一个是 Runtime only 的，前者是包含编译代码的，可以把编译过程放在运行时做，后者是不包含编译代码的，需要借助 webpack 的 vue-loader 事先把模板编译成 render函数
    使用 Runtime + Compiler 的 Vue.js，它的入口是 src/platforms/web/entry-runtime-with-compiler.js，看一下它对 $mount 函数的定义

    1. const mount = Vue.prototype.$mount
    2. Vue.prototype.$mount = function (
    3.   el?: string | Element,
    4.   hydrating?: boolean
    5. ): Component {
    6.   el = el && query(el)
    8.   /* istanbul ignore if */
    9.   if (el === document.body || el === document.documentElement) {
    10.     process.env.NODE_ENV !== 'production' && warn(
    11.       `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
    12.     )
    13.     return this
    14.   }
    16.   const options = this.$options
    17.   // resolve template/el and convert to render function
    18.   if (!options.render) {
    19.     let template = options.template
    20.     if (template) {
    21.       if (typeof template === 'string') {
    22.         if (template.charAt(0) === '#') {
    23.           template = idToTemplate(template)
    24.           /* istanbul ignore if */
    25.           if (process.env.NODE_ENV !== 'production' && !template) {
    26.             warn(
    27.               `Template element not found or is empty: ${options.template}`,
    28.               this
    29.             )
    30.           }
    31.         }
    32.       } else if (template.nodeType) {
    33.         template = template.innerHTML
    34.       } else {
    35.         if (process.env.NODE_ENV !== 'production') {
    36.           warn('invalid template option:' + template, this)
    37.         }
    38.         return this
    39.       }
    40.     } else if (el) {
    41.       template = getOuterHTML(el)
    42.     }
    43.     if (template) {
    44.       /* istanbul ignore if */
    45.       if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    46.         mark('compile')
    47.       }
    49.       // 编译入口
    50.       // compileToFunctions方法就是把模板template编译生成render以及staticRenderFns
    51.       const { render, staticRenderFns } = compileToFunctions(template, {
    52.         outputSourceRange: process.env.NODE_ENV !== 'production',
    53.         shouldDecodeNewlines,
    54.         shouldDecodeNewlinesForHref,
    55.         delimiters: options.delimiters,
    56.         comments: options.comments
    57.       }, this)
    58.       options.render = render
    59.       options.staticRenderFns = staticRenderFns
    61.       /* istanbul ignore if */
    62.       if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    63.         mark('compile end')
    64.         measure(`vue ${this._name} compile`, 'compile', 'compile end')
    65.       }
    66.     }
    67.   }
    68.   return mount.call(this, el, hydrating)
    69. }

    compileToFunctions定义在 src/platforms/web/compiler/index.js 中

    1. import { baseOptions } from './options'
    2. import { createCompiler } from 'compiler/index'
    4. const { compile, compileToFunctions } = createCompiler(baseOptions)
    6. export { compile, compileToFunctions }

    createCompiler方法接收一个编译配置参数
    createCompiler方法定义在src/compiler/index.js中

    1. // `createCompilerCreator` allows creating compilers that use alternative
    2. // parser/optimizer/codegen, e.g the SSR optimizing compiler.
    3. // Here we just export a default compiler using the default parts.
    4. // 实际上是通过调用createCompilerCreator方法返回
    5. // 该方法传入的参数是一个函数，真正的编译过程都在这个baseCompile函数里执行
    6. export const createCompiler = createCompilerCreator(function baseCompile (
    7.   template: string,
    8.   options: CompilerOptions
    9. ): CompiledResult {
    10.   const ast = parse(template.trim(), options)
    11.   if (options.optimize !== false) {
    12.     optimize(ast, options)
    13.   }
    14.   const code = generate(ast, options)
    15.   return {
    16.     ast,
    17.     render: code.render,
    18.     staticRenderFns: code.staticRenderFns
    19.   }
    20. })

    createCompilerCreator定义在src/compiler/create-compiler.js中

    1. export function createCompilerCreator (baseCompile: Function): Function {
    2.   return function createCompiler (baseOptions: CompilerOptions) {
    3.     function compile (
    4.       template: string,
    5.       options?: CompilerOptions
    6.     ): CompiledResult {
    7.       const finalOptions = Object.create(baseOptions)
    8.       const errors = []
    9.       const tips = []
    11.       let warn = (msg, range, tip) => {
    12.         (tip ? tips : errors).push(msg)
    13.       }
    15.       if (options) {
    16.         if (process.env.NODE_ENV !== 'production' && options.outputSourceRange) {
    17.           // $flow-disable-line
    18.           const leadingSpaceLength = template.match(/^\s*/)[0].length
    20.           warn = (msg, range, tip) => {
    21.             const data: WarningMessage = { msg }
    22.             if (range) {
    23.               if (range.start != null) {
    24.                 data.start = range.start + leadingSpaceLength
    25.               }
    26.               if (range.end != null) {
    27.                 data.end = range.end + leadingSpaceLength
    28.               }
    29.             }
    30.             (tip ? tips : errors).push(data)
    31.           }
    32.         }
    33.         // merge custom modules
    34.         if (options.modules) {
    35.           finalOptions.modules =
    36.             (baseOptions.modules || []).concat(options.modules)
    37.         }
    38.         // merge custom directives
    39.         if (options.directives) {
    40.           finalOptions.directives = extend(
    41.             Object.create(baseOptions.directives || null),
    42.             options.directives
    43.           )
    44.         }
    45.         // copy other options
    46.         for (const key in options) {
    47.           if (key !== 'modules' && key !== 'directives') {
    48.             finalOptions[key] = options[key]
    49.           }
    50.         }
    51.       }
    53.       finalOptions.warn = warn
    55.       const compiled = baseCompile(template.trim(), finalOptions)
    56.       if (process.env.NODE_ENV !== 'production') {
    57.         detectErrors(compiled.ast, warn)
    58.       }
    59.       compiled.errors = errors
    60.       compiled.tips = tips
    61.       return compiled
    62.     }
    64.     return {
    65.       compile,
    66.       compileToFunctions: createCompileToFunctionFn(compile)
    67.     }
    68.   }
    69. }

    该方法返回了一个 createCompiler 的函数，它接收一个 baseOptions 的参数，返回的是一个对象，包括 compile 方法属性和 compileToFunctions 属性
    这个 compileToFunctions 对应的就是 $mount 函数调用的 compileToFunctions 方法，它是调用 createCompileToFunctionFn 方法的返回值
    createCompileToFunctionFn方法定义在src/compiler/to-function.js中

    1. export function createCompileToFunctionFn (compile: Function): Function {
    2.   const cache = Object.create(null)
    4.   return function compileToFunctions (
    5.     template: string, // 编译模板template
    6.     options?: CompilerOptions, // 编译配置options
    7.     vm?: Component // Vue实例vm
    8.   ): CompiledFunctionResult {
    9.     options = extend({}, options)
    10.     const warn = options.warn || baseWarn
    11.     delete options.warn
    13.     /* istanbul ignore if */
    14.     if (process.env.NODE_ENV !== 'production') {
    15.       // detect possible CSP restriction
    16.       try {
    17.         new Function('return 1')
    18.       } catch (e) {
    19.         if (e.toString().match(/unsafe-eval|CSP/)) {
    20.           warn(
    21.             'It seems you are using the standalone build of Vue.js in an ' +
    22.             'environment with Content Security Policy that prohibits unsafe-eval. ' +
    23.             'The template compiler cannot work in this environment. Consider ' +
    24.             'relaxing the policy to allow unsafe-eval or pre-compiling your ' +
    25.             'templates into render functions.'
    26.           )
    27.         }
    28.       }
    29.     }
    31.     // check cache
    32.     const key = options.delimiters
    33.       ? String(options.delimiters) + template
    34.       : template
    35.     if (cache[key]) {
    36.       return cache[key]
    37.     }
    39.     // compile
    40.     // 核心编译过程
    41.     const compiled = compile(template, options)
    43.     // check compilation errors/tips
    44.     if (process.env.NODE_ENV !== 'production') {
    45.       if (compiled.errors && compiled.errors.length) {
    46.         if (options.outputSourceRange) {
    47.           compiled.errors.forEach(e => {
    48.             warn(
    49.               `Error compiling template:\n\n${e.msg}\n\n` +
    50.               generateCodeFrame(template, e.start, e.end),
    51.               vm
    52.             )
    53.           })
    54.         } else {
    55.           warn(
    56.             `Error compiling template:\n\n${template}\n\n` +
    57.             compiled.errors.map(e => `- ${e}`).join('\n') + '\n',
    58.             vm
    59.           )
    60.         }
    61.       }
    62.       if (compiled.tips && compiled.tips.length) {
    63.         if (options.outputSourceRange) {
    64.           compiled.tips.forEach(e => tip(e.msg, vm))
    65.         } else {
    66.           compiled.tips.forEach(msg => tip(msg, vm))
    67.         }
    68.       }
    69.     }
    71.     // turn code into functions
    72.     const res = {}
    73.     const fnGenErrors = []
    74.     res.render = createFunction(compiled.render, fnGenErrors)
    75.     res.staticRenderFns = compiled.staticRenderFns.map(code => {
    76.       return createFunction(code, fnGenErrors)
    77.     })
    79.     // check function generation errors.
    80.     // this should only happen if there is a bug in the compiler itself.
    81.     // mostly for codegen development use
    82.     /* istanbul ignore if */
    83.     if (process.env.NODE_ENV !== 'production') {
    84.       if ((!compiled.errors || !compiled.errors.length) && fnGenErrors.length) {
    85.         warn(
    86.           `Failed to generate render function:\n\n` +
    87.           fnGenErrors.map(({ err, code }) => `${err.toString()} in\n\n${code}\n`).join('\n'),
    88.           vm
    89.         )
    90.       }
    91.     }
    93.     return (cache[key] = res)
    94.   }
    95. }

    compile函数在执行 createCompileToFunctionFn 的时候作为参数传入，它是 createCompiler 函数中定义的 compile 函数

    1. function compile (
    2.  template: string,
    3.  options?: CompilerOptions
    4. ): CompiledResult {
    5.   const finalOptions = Object.create(baseOptions)
    6.   const errors = []
    7.   const tips = []
    9.   let warn = (msg, range, tip) => {
    10.     (tip ? tips : errors).push(msg)
    11.   }
    13.     // 处理配置参数
    14.   if (options) {
    15.     if (process.env.NODE_ENV !== 'production' && options.outputSourceRange) {
    16.       // $flow-disable-line
    17.       const leadingSpaceLength = template.match(/^\s*/)[0].length
    19.       warn = (msg, range, tip) => {
    20.         const data: WarningMessage = { msg }
    21.         if (range) {
    22.           if (range.start != null) {
    23.             data.start = range.start + leadingSpaceLength
    24.           }
    25.           if (range.end != null) {
    26.             data.end = range.end + leadingSpaceLength
    27.           }
    28.         }
    29.         (tip ? tips : errors).push(data)
    30.       }
    31.     }
    32.     // merge custom modules
    33.     if (options.modules) {
    34.       finalOptions.modules =
    35.         (baseOptions.modules || []).concat(options.modules)
    36.     }
    37.     // merge custom directives
    38.     if (options.directives) {
    39.       finalOptions.directives = extend(
    40.         Object.create(baseOptions.directives || null),
    41.         options.directives
    42.       )
    43.     }
    44.     // copy other options
    45.     for (const key in options) {
    46.       if (key !== 'modules' && key !== 'directives') {
    47.         finalOptions[key] = options[key]
    48.       }
    49.     }
    50.   }
    52.   finalOptions.warn = warn
    54.   // 编译过程
    55.   const compiled = baseCompile(template.trim(), finalOptions)
    56.   if (process.env.NODE_ENV !== 'production') {
    57.     detectErrors(compiled.ast, warn)
    58.   }
    59.   compiled.errors = errors
    60.   compiled.tips = tips
    61.   return compiled
    62. }

    baseCompile在执行 createCompilerCreator 方法时作为参数传入

    1. // `createCompilerCreator` allows creating compilers that use alternative
    2. // parser/optimizer/codegen, e.g the SSR optimizing compiler.
    3. // Here we just export a default compiler using the default parts.
    4. export const createCompiler = createCompilerCreator(function baseCompile (
    5.   template: string,
    6.   options: CompilerOptions
    7. ): CompiledResult {
    8.   // 解析模板字符串生成AST
    9.   const ast = parse(template.trim(), options)
    10.   if (options.optimize !== false) {
    11.     // 优化语法树
    12.     optimize(ast, options)
    13.   }
    14.   // 生成代码
    15.   const code = generate(ast, options)
    16.   return {
    17.     ast,
    18.     render: code.render,
    19.     staticRenderFns: code.staticRenderFns
    20.   }
    21. })

    编译入口逻辑之所以这么绕，是因为 Vue.js 在不同的平台下都会有编译的过程，因此编译过程中的依赖的配置 baseOptions 会有所不同。而编译过程会多次执行，但这同一个平台下每一次的编译过程配置又是相同的，为了不让这些配置在每次编译过程都通过参数传入，Vue.js 利用了函数柯里化的技巧很好的实现了 baseOptions 的参数保留。同样，Vue.js 也是利用函数柯里化技巧把基础的编译过程函数抽出来，通过 createCompilerCreator(baseCompile) 的方式把真正编译的过程和其它逻辑如对编译配置处理、缓存处理等剥离开，这样的设计还是非常巧妙的