vue模板编译，源码调试过程

1. 为什么进行模板编译

在vue中，template中可以写表达式，条件渲染，循环渲染，点击事件等，这些在html中是不可以实现的，只能在js中实现，所以vue对他进行了处理，处理的方法就是模板编译为render函数，执行render函数，返回vnode

2. 模板编译过程：

1. 入口compileToFunctions()函数——src/platforms/web/entry-runtime-with-compiler.js

2. 进入compilerToFunctions()函数，src/compiler/to-function.js中的createCompileToFunctionFn()方法

主要作用：

判断有无缓存的编译对象，如果有直接返回，第一次进入时没有缓存

const key = options.delimiters
  ? String(options.delimiters) + template
  : template
// 1. 判断有无缓存的编译对象compileFunctionResult，如果有直接返回
if (cache[key]) {
  return cache[key]
}

compile把模板编译为编译对象(render,staticRenderFns),字符串形式的js代码

const compiled = compile(template, options)

createFunction将字符串形式js代码转换为js方法

res.render = createFunction(compiled.render, fnGenErrors)
res.staticRenderFns = compiled.staticRenderFns.map(code => {
  // 把数组中每一项转为render方法
  return createFunction(code, fnGenErrors)
})

缓存并返回res对象

// 4. 缓存并返回res对象(render,staticRenderFns方法)
return (cache[key] = res)

3. compile主要作用：a. 合并选项；b. 调用baseCompile(template.trim(), finalOptions)

/src/compiler/create-compiler.js——createCompilerCreator()方法

a. 合并选项

// 创建一个没有原型的对象finalOptions，用来合入baseOptions和complie传入的options
const finalOptions = Object.create(baseOptions)
// 编译过程中出现的错误和信息
const errors = []
const tips = []
......
// ！！！baseCompile模板编译核心函数，把模板编译成render函数,返回一个函数
// 函数中有两个成员，render,staticRenderFns,此时存储的是字符串js代码
const compiled = baseCompile(template.trim(), finalOptions)

b. 调用baseCompile()方法（src/compiler/index.js——createCompilerCreator(function baseCompile (){...})）

export const createCompiler = createCompilerCreator(function baseCompile (
  // 模板，用户传入的参数
  template: string,
  options: CompilerOptions
): CompiledResult {
  // 将template转为ast抽象语法树
  // parse传入两值，去空格的模板，合入的options
  const ast = parse(template.trim(), options)
  if (options.optimize !== false) {
    // 优化抽象语法树
    optimize(ast, options)
  }
  // 将抽象语法树转为 字符串类型 js
  const code = generate(ast, options)
  return {
    // 抽象语法树
    ast,
    // 渲染函数，此时的render是字符串形式的，还需要调用toFunction转为js方法
    render: code.render,
    // 静态渲染函数
    staticRenderFns: code.staticRenderFns
  }
})

主要有3个作用:

通过parse将模板编译为抽象语法树ast
- 遍历html，转换为ast对象，也就是普通对象
- 相关的html指令/属性记录在ast相应对象的属性上
1. ast，抽象语法树
抽象语法树，abstract syntax tree,ast;
使用对象的形式描述树形代码结构;
此处的ast是描述属性结构的HTML字符串

2. 为什么使用抽象语法树
模板字符串转换为ast后，可通过ast对模板进行优化
标记模板中的静态代码，patch的时候可跳过静态内容
在patch过程中静态代码不需要对比和重新渲染
使用babel也是先将代码转为ast，再将代码进行降级
优化抽象语法树ast，标记静态节点与静态根节点
- markStatic标记静态节点，判断node.type，=2表达式不标记，=3文本静态标记；=1标签元素，遍历子节点标记静态节点
- markStaticRoots标记静态根节点，静态根节点（标签包含文本，有静态子标签；标签只是纯文本不是静态根节点，因为优化成本大于收益）
generate将抽象语法树转为字符串类型的js
- 通过genElement生成字符串的js代码
  1. 判断staticProcessed，用来标记是否被处理，如果已经被处理则不处理
  2. 处理once/if/for转为render指令；template,组件转为字符的js代码
  3. genChildren完成后生成了render函数中所需要的代码，使用_c传入tag,data,children
- staticRenderFns静态根节点处理

4. createFunction将字符串形式js代码转换为js方法

src/compiler/to-function.js——createFunction()

function createFunction (code, errors) {
  try {
    // 通过new Function转为js方法
    return new Function(code)
  } catch (err) {
    errors.push({ err, code })
    return noop
  }
}