写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`)
}
编译类型
template
会涉及到三种类型
<div>
hi, {{msg}}
</div>
element
:div
text
:hi
插值
:{{msg}}