Vue 源码分析step_1 -compileToFunctions是什么?

顾及到使用 Vue 的所有场景，今后分析的版本全部为完全的 vue 版本，即带编译器的版本。在 entry-runtime-with-compiler.js 中，有这么一个代码：

// 引入 Vue 构造函数供外部使用

import Vue from './runtime/index'

//引入编译函数

import { compileToFunctions } from './compiler/index'

---

compileToFunctions是什么？

顺着引入文件的路径往下找，在源码的编译器部分，找到了这个方法

export const createCompiler = createCompilerCreator(function baseCompile (
  template: string,
  options: CompilerOptions
): CompiledResult {
  // 第一步 模板被解析成为了 ast
  const ast = parse(template.trim(), options)
  //  第二步
  if (options.optimize !== false) {
    optimize(ast, options)
  }
  // 第三部步骤
  const code = generate(ast, options)
  return {
    ast,
    render: code.render,
    staticRenderFns: code.staticRenderFns
  }
})

这个方法其实就是编译过程

• 第一步将模板编译成AST
• 第二步是将 AST 进行一个优化，其实主要优化是打上了静态节点的标记
• 第三步是调用代码生成器，将编译好的 AST 对象，转化为字符串。(不是简简单单的tostring()转化)，这个字符串今后会被代入到渲染函数中用来生成 Vnode