Vue模板是怎样编译的_2023-02-24

这一章我们开始讲模板解析编译:总结来说就是通过compile函数把tamplate解析成render Function形式的字符串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 {
  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
  }
})

我们可以看出createCompiler函数内部运行的是parse、optimize、generate三个函数，而生成的是ast，render，staticRenderFns三个对象

parse

当我们把代码折叠起来的话会看到parse函数里面核心就是parseHTML函数，他通过正则文法和start,end,chars,comment四个钩子函数来解析模板标签的：

这些正则文法都是用来Vue中匹配开始标签，结束标签，属性，标签名，注释，文本等

我们知道了parseHTML(html,options){}接受俩个参数，我们再来看一下parseHTML中是如何去匹配的：

参考 前端进阶面试题详细解答

所以整个parseHTML中的流程总结为：

• 首先通过while (html)去循环判断html内容是否存在。
• 再判断文本内容是否在script/style标签中
• 上述条件都满足的话，开始解析html字符串 纸上得来终觉浅，绝知此事要躬行，那我么来实操一下如何解析一段字符串吧:

开始解析：

那么我们继续来看一下parseStartTag，handleStartTag两个函数分别实现了啥功能：

我们再来看看解析过程中是如何一个字符一个字符的匹配html字符串的：

//通过传入变量n来截取字符串，这也是Vue解析的重要方法，通过不断地分割html字符串，一步步完成对他的解析过程。

那么我们再回到parseStartTag上，首先开始匹配开始标签那入栈的是

再者匹配到注释:

处理成:

然后继续处理标签节点<div v-if="show" class="message">,再处理{{message}}之后模板变成

看tamplate已经是只剩下结束标签了，那么毫无疑问就会走到parseEndTag函数:

那么在handStartTag与handEndTag中分别调用了options.start options.end钩子函数，而在start钩子函数中直接调用createASTElement函数（语法分析阶段）：

那么就解析完了整个tamplate变成了AST：

咱们也可以去AST Explorer上面去尝试

这是tamplate经过解析的第一步，生成了一个AST对象，那么此章节到这里就完了