Vue 2 阅读理解（二）之 Compile 模板编译

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第15天，点击查看活动详情

template compile 模板解析

在 runtime-with-compiler.ts 中，Vue 构造函数的 $mount 被重写，添加了对于 template 模板的解析部分。

const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (el?: string | Element, hydrating?: boolean): Component {
  el = el && query(el)

  if (el === document.body || el === document.documentElement) {
    __DEV__ && warn('')
    return this
  }

  const options = this.$options
  if (!options.render) {
    let template = options.template
    if (template) {
      if (typeof template === 'string') {
        if (template.charAt(0) === '#') {
          template = idToTemplate(template)
          if (__DEV__ && !template) {
            warn('')
          }
        }
      } else if (template.nodeType) {
        template = template.innerHTML
      } else {
        __DEV__ && warn('')
        return this
      }
    } else if (el) {
      template = getOuterHTML(el)
    }
    if (template) {
      const { render, staticRenderFns } = compileToFunctions(
        template,
        {
          outputSourceRange: __DEV__,
          shouldDecodeNewlines,
          shouldDecodeNewlinesForHref,
          delimiters: options.delimiters,
          comments: options.comments
        },
        this
      )
      options.render = render
      options.staticRenderFns = staticRenderFns
    }
  }
  return mount.call(this, el, hydrating)
}
复制代码

上面的源代码省略了性能分析部分。

当然，既然是编译 template，那么肯定是建立在有 template 配置的基础上，但是因为 render() 方法的优先级高于 template，所以这里采用的是判断 不存在 render 属性 才执行模板编译。

这段代码的大致逻辑如下：

判断 el 挂载节点，会校验 不能挂载到 html 和 body 上。

判断不存在 render 配置，执行 template compile 模板编译

整个模板编译过程又分为：“模板字符串查询” 和 “render函数转换”

1. 模板字符串查询

模板字符串查询分为以下两种情况：

1. 存在 template 配置：

如果 template 是字符串，且以 # 开头，则将该属性视为节点 id 进行获取，并将结果转为 html 字符串重新赋值给 template 变量；如果字符串 不以 # 开头 或者 获取结果不存在，则报错并直接退出该函数

如果 template 具有 nodeType 属性，则表示 template 就是一个 dom 节点，就直接使用 innerHTML 获取该节点的 html 字符串并重新赋值给 template 变量

template 既不是 id 字符串也不是 dom 节点，则直接退出函数并报错：非法 template 配置

这种情况采用的都是 element.innerHTML 属性，即只取用配置节点内部的子节点

2. 不存在 template 但是有 el 对应的节点：

因为上文已经查询过 el 配置对应的 dom 节点，所以这里的 el 要么是 undefined，要么就是一个真实 dom

如果 el 节点有 outerHTML 属性，则将 template 变量设置为 el.outerHTML

否则创建一个新的 div 节点 container，并在 container 中插入一个 el 节点的复制节点，将 template 变量设置为 container.innerHTML

如果经过上面的步骤之后，查询到了对应的 template 模板字符串，则进行后续的模板编译；否则直接调用缓存的 mount 方法直接进行后续操作（也就是最初定义的 Vue.prototype.$mount，将实例的 render 方法直接绑定为一个创建空节点的方法）

2. render函数转换

这里的逻辑主要在 compileToFunctions 函数中

const { render, staticRenderFns } = compileToFunctions(
  template,
  {
    outputSourceRange: __DEV__,
    shouldDecodeNewlines,
    shouldDecodeNewlinesForHref,
    delimiters: options.delimiters,
    comments: options.comments
  },
  this
)
复制代码

而 compileToFunctions 来自于 createCompiler

import { baseOptions } from './options'
import { createCompiler } from 'compiler/index'

const { compile, compileToFunctions } = createCompiler(baseOptions)
export { compile, compileToFunctions }

// 这里的 baseOptions 包含以下内容
export const baseOptions: CompilerOptions = {
  expectHTML: true,
  modules, // 处理 class，style 绑定 和 v-model 语法糖
  directives, // 处理 v-model,v-text,v-html 指令
  isPreTag, // 判断 pre 标签
  isUnaryTag, // 判断 link，meta，source，input 之类的可闭合标签
  mustUseProp, // 判断 input，textarea，option 之类的标签，只可以使用 prop 绑定特定属性
  canBeLeftOpenTag, // 判断可以只需要开启部分的标签
  isReservedTag, // 判断是不是 html 或者 svg 保留标签
  getTagNamespace, // 获取 svg 类标签和 math 标签
  staticKeys: genStaticKeys(modules) // 返回由 modules 的每个模块的staticKeys组成的字符串
}
复制代码

createCompiler 则是来自 createCompilerCreator 的执行结果。

export const createCompiler = createCompilerCreator(function baseCompile(
  template: string,
  options: CompilerOptions
): CompiledResult {
  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
  }
})
复制代码

createCompilerCreator 函数接收一个 baseCompile 函数作为参数，返回一个接收 CompilerOptions 参数并返回 compile，compileToFunctions 的对象。而 compileToFunctions 方法则是来自于 createCompileToFunctionFn(compile)

3. baseCompile 函数

该函数接收一个 template 模板字符串（也就是前面通过模板字符串查询得到的结果）和一个编译配置，返回一个包含抽象语法树等属性的对象。

ast：由 template 模板得到的 dom 节点关系的 AST 抽象语法树，如果有配置 optimize ，还会调用 **optimize(ast, options)**进行优化
render：由 generate 方法生成的渲染方法，主要是通过 遍历 ast 来拼接一个由 _c(xxx) 等方法组成的字符串，这些方法都在定义 Vue 构造函数时被定义的。
staticRenderFns：与 render 类似，但是只有在 template 是纯静态节点的时候有返回值

template: "<div class='demo-vm-2'>" +
            "<h2>Demo VM 2</h2>" +
            "<p>demo2 data is: {{ data2 }}</p>" +
            "<p>demo2 props data is: {{ result }}</p>" +
            "<span>test span</span>" +
            "<button @click='demoClick2'>button2</button>" +
            "<br />" +
            "<input :value='changeMessage' />" +
            "<slot name='slot1'></slot>" +
            "<slot></slot>" +
            "<demo-vm-three></demo-vm-three>" +
            "<demo-vm-four></demo-vm-four>" +
            "</div>"
== 编译后 ==>
render：`with(this){return _c('div',{staticClass:"demo-vm-2"},[_c('h2',[_v("Demo VM 2")]),_c('p',[_v("demo2 data is: "+_s(data2))]),_c('p',[_v("demo2 props data is: "+_s(result))]),_c('span',[_v("test span")]),_c('button',{on:{"click":demoClick2}},[_v("button2")]),_c('br'),_c('input',{domProps:{"value":changeMessage}}),_t("slot1"),_t("default"),_c('demo-vm-three'),_c('demo-vm-four')],2)}`


template: "<div class='demo-vm-4'>" +
            "<h2>Demo VM 4</h2>" +
            "</div>"
== 编译后 ==>
staticRenderFns: ["with(this){return _c('div',{staticClass:\"demo-vm-4\"},[_c('h2',[_v(\"Demo VM 4\")])])}"]
复制代码

这里的 render 和 staticRenderFns 返回值都是一个 with 函数，通过内部的字符串编译成 JavaScript 脚本并指定内部环境变量为当前实例 this

4. compile 函数

compile 函数由 createCompiler 函数创建，接收 template 模板字符串和 baseOptions 编译配置，并通过闭包的方式使用上面的 baseCompile 方法来编译 template 模板。

最终 compile 函数内部核心逻辑就是将 compileToFunctions() 传入的编译配置项和 baseOptions 基础配置项合并为一个配置项 finalOptions，并通过 baseCompile(template, finalOptions) 来得到最终的组件渲染函数。