31-编译模块概述

49 阅读1分钟

写Vue的时候,相对于render,最方便的还是<template>; 但Vue内部最终会通过compiler把<template>转换成render,我们接下来要做的事,就是去实现这一转换过程。

编译流程

  • 用户编写 template 字符串
  • Vue内部通过 parser 转换为 AST 抽象语法树
  • 将 AST 传递到 transform 模块,对 AST 进行处理
  • 将处理好的 AST 传递到 codegen 最终输出 render
let template = `<template>Consumer: xxx</template>`
render() {
    return h('div', {}, `Consumer: xxx`)
}

parser-01.png

编译类型

template 会涉及到三种类型

<div>
    hi, {{msg}}
</div>
  • elementdiv
  • texthi
  • 插值{{msg}}

实现