# 核心编译

compile函数里所使用的baseCompile函数是在调用createCompilerCreator函数时传入的。baseCompile函数里的逻辑是核心的编译流程,与平台无关,具体包括:

  • 解析模板字符串,创建 AST
  • 优化 AST
  • 基于 AST 生成字符串形式的render/staticRenderFns

最后返回对象{ ast, render, staticRenderFns }

// src/compiler/index.js

import { parse } from './parser/index'
import { optimize } from './optimizer'
import { generate } from './codegen/index'
import { createCompilerCreator } from './create-compiler'

// `createCompilerCreator` allows creating compilers that use alternative
// parser/optimizer/codegen, e.g the SSR optimizing compiler.
// Here we just export a default compiler using the default parts.
export const createCompiler = createCompilerCreator(function baseCompile (
  template: string,
  options: CompilerOptions
): CompiledResult {
  // 解析模板字符串,创建 AST
  const ast = parse(template.trim(), options)

  // 优化 AST
  if (options.optimize !== false) {
    optimize(ast, options)
  }

  // 基于 AST 生成字符串形式的`render`/`staticRenderFns`
  const code = generate(ast, options)
  return {
    ast,
    // 字符串形式的 render/staticRenderFns
    render: code.render,
    staticRenderFns: code.staticRenderFns
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 解析模板字符串,创建 AST

parse函数接收templateoptions为参数,返回 AST 的根节点,详情请见解析模板字符串,创建 AST

# 优化 AST

# 生成 render 字符串

本站总访问量    次