模板编译
浏览器其实并不能理解vue的模板语法，vue实际上是先利用编译器（compiler）在编译阶段实现模板编译 ，即将模板语法转换成vnode，然后在通过patch操作修改DOM来达到更改视图的目的。
模板编译包含几个重要操作和中间产物，大致流程如下：
复制 template -> (parse) -> ast -> (transform) => codegenNode -> (generate) -> render函数 三个重要的步骤：
parse： 解析template生成token并构建模板AST。
transform： 将模板AST转换成能够生成JavaScript渲染函数代码的AST（codegenNode）
generate：根据前面生成的AST来生成渲染函数代码。
解析模板并构建AST的思路
HTML解析规范
事实上，解析html并构造token是有规范的，见
**vue使用有限状态自动机来解析模板。**所谓“有限状态”，就是指有限个状态，而“自动机”意味着随着字符的输入，解析器会自动地在不同状态间迁移。
例如上面的Data 状态，它规定了在当前状态下，不同的下个输入字符所能进入的不同状态以及相应的处理方法。像这样的状态有很多，解析过程就在这些状态中不停的流转，直到到达结尾。在这个过程中会创建很多token，利用这些token可以构建ast。
另外除了state外，HTML规范还定义了模式(mode)，规则如下：
<title> 标签、<textarea> 标签，当解析器遇到这两个标签时，会切换到 RCDATA 模式；
<style>、<xmp>、<iframe>、<noembed>、<noframes>、<noscript> 等标签，当解析器遇到这些标签时，会切换到 RAWTEXT 模式；
当解析器遇到 <![CDATA[ 字符串时，会进入 CDATA 模式。
其他模式与Data模式的解析方式相似，简单起见，这里只考虑Data state。
以一个简单的html来说明解析流程：
解析过程是这样：
读取下一个输入字符，是ASCII码h，将当前输入字符的小写版本添加到当前tag token的标签名称，不流转状态。
读取下一个输入字符，是ASCII码1，将当前输入字符的小写版本添加到当前tag token的标签名称，不流转状态。
读取下一个输入字符，发现是V，将该字符作为character token 发送 。
读取下一个输入字符，发现是u，将该字符作为character token 发送 。
读取下一个输入字符，发现是e，将该字符作为character token 发送 。
读取下一个输入字符，发现是ASCII码h，将当前输入字符的小写版本添加到当前tag token的标签名称，不流转状态。
读取下一个输入字符，发现是ASCII码1，将当前输入字符的小写版本添加到当前tag token的标签名称，不流转状态。
读取下一个输入字符串，EOF，发现读取完毕，发送end-of-file token。
在上面的例子中我们可以看到每次都只取出一个字符进行判断，并且每次判断完后都会自动读取下一个字符再判断(某些情况会将当前字符重新作为下一个字符)，假设当前组件模板字符串存于context.source中，我们可以通过不断的删除前面已经判断过的字符来使每次都能通过context.source[0]获取到下一个字符。
复制 while(context.source){
if(mode=='data' && context.source[0] === '<'){
mode = 'tag open'
// ...
}else if(mode == 'tag open' && /[a-z]/.test(context.source[0])){
mode = 'tag name'
// ...
}else if(context.source[0] === '>'){
mode = 'data'
// ...
}
// ...
context.source = context.source.slice(1)
} 判断是否是自闭和标签
HTML中有些标签是自闭和的，例如<br /> 。假如该标签是自闭和标签，则表示它没有闭合标签，解析方式与闭和标签不同，因此我们在解析标签时还得判断其是否是自闭和标签。
判断的方式有两种，一种是设立自闭和标签名单，然后判断标签名是否在自闭和名单之中。
另一种更简单的方法是判断标签是否以/>结束。
复制 let isSelfClosing = false
isSelfClosing = startsWith(context.source, '/>') 解析插值语法和attribute绑定
通过HTML规范我们已经能够实现解析HTML，但是vue的template与HTML并不完全相同，vue template对HTML做了增强，例如插值语法({{}})、Attribute 绑定等。
判断是否是插值语法很简单，只需要在文本状态时读取是否有{{即可，当读到}}表示插值语法结束。
而attribute属性也有规律可循，首先attribute属性是在标签内部，其次是name=value的形式，例如<a href=”http://123.com” > ，因此我们可以用正则来获取name和value，判断是否是attribute绑定也很简单，直接判断是否以: 、 v-on等开始即可。
复制 // Name.
const start = getCursor(context)
const match = /^[^\t\r\n\f />][^\t\r\n\f />=]*/.exec(context.source)!
// 假设此时context.source = ':href="">'，可以匹配到:href
const name = match[0]
// 删除已匹配的name和=
context.source = context.source.slice(name.length + 1)
if (!context.inVPre && /^(v-|:|\.|@|#)/.test(name)) {
// 如果attribute有使用绑定，则需要进一步处理
} value的处理分三种情况：被单引号包裹、被双引号包裹、没有引号包裹，例如a='a' 、 b="b" 和c=c 。被引号包裹的两种情况容易处理，第三种情况复杂一些，因为属性之间由空格、制表符等符号分隔，所以可以通过正则表达式/^[^\t\r\n\f >]+/匹配到从当前字符到下个属性或标签结束标志(>号)前的内容，例如foo=value a=c> ，因为name和=被使用过删除了，因此剩下value a=c>，正则表达式/^[^\t\r\n\f >]+/能匹配到value。
这里还要注意，如果是不被引号包裹，那么value就不能再出现引号等特殊符号。例如foo=f"oot"，这可能是用户书写错误，可以用正则表达式/["'<=]/g`提取并发送错误。
复制 // a='a' b="b" c=c
const quote = context.source[0]
const isQuoted = quote === `"` || quote === `'`
if (isQuoted) {
// value被引号包裹的情况
const endIndex = context.source.indexOf(quote)
context.source = context.source.slice(1) // 删除左侧的引号
if (endIndex === -1) {
// 如果没有右侧的引号，则将source后面的所有内容都作为attribute
content = parseTextData(
context,
context.source.length,
TextModes.ATTRIBUTE_VALUE
)
} else {
// 如果有右侧的引号，则提取引号内的value
content = parseTextData(context, endIndex, TextModes.ATTRIBUTE_VALUE)
}
}
else{
// 没有引号包裹的情况
const match = /^[^\t\r\n\f >]+/.exec(context.source);
if (!match) {
return undefined;
}
const unexpectedChars = /["'<=`]/g;
let m;
while ((m = unexpectedChars.exec(match[0]))) {
// 将引号的位置发送给错误处理机制，提醒用户。
emitError(
context,
ErrorCodes.UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE,
m.index
)
}
content = parseTextData(context, match[0].length, TextModes.ATTRIBUTE_VALUE)
} 属性解析阶段结束的标志应当是下一个输入字符为>或者/>的时候。所以整个属性解析过程应该是在while循环的内部。
复制 while (
context.source.length > 0 &&
!startsWith(context.source, '>') &&
!startsWith(context.source, '/>')
) {
const attr = parseAttribute(context, attributeNames)
// ...
} 构建AST
通过上一节的介绍，我们已经能够解析template，下一步就是根据解析过程中生成的token来构建AST。
以下面这个例子：
复制 <h1><span>Vue</span></h1> 通过解析获得了下面的tokens：
复制 [
{type: "start tag", tagName: "h1"},
{type: "start tag", tagName: "span"},
{type: "text", value: "Vue"},
{type: "end tag", tagName: "span"},
{type: "end tag", tagName: "h1"},
{type: "end-of-file"}
] ast是树结构，我们需要扫描tokens来构建这颗树，这里需要借助栈结构。每次从tokens出队一个节点，如果type是开始标签，则作为栈顶的子节点，并将其添加进栈结构中，作为下一个节点的父节点，如果type是结束标签，则移除栈顶节点，当type为EOF时结束。
复制 const tokens = [
{ type: "start tag", tagName: "h1" },
{ type: "start tag", tagName: "span" },
{ type: "text", value: "Vue" },
{ type: "end tag", tagName: "span" },
{ type: "end tag", tagName: "h1" },
{type: "end-of-file"}
];
const root = {type: "root",children: []}
const nodeStack = [root];
while (nodeStack.length) {
const parent = nodeStack[nodeStack.length-1];
const currentNode = tokens.shift();
if (currentNode.type === 'start tag') {
const element = {type: 'element', tag: currentNode.tagName, children:[]}
parent.children.push(element);
nodeStack.push(element)
} else if (currentNode.type === 'text') {
const textNode = {type: 'text', value: currentNode.value}
parent.children.push(textNode)
} else if (currentNode.type === 'end tag') {
nodeStack.pop()
} else if(currentNode.type === 'end-of-file'){
break;
}
}
console.log(root); vue-compiler源码
在实际的vue源码中，由compiler来完成从解析模板到生成渲染函数的整个过程。
在vue的源码中有4个负责compiler的package，分别是：
compiler-core存放compile核心逻辑代码，这部分代码无关运行环境，compiler-sfc 提供转换sfc为渲染函数的底层API，而compiler-ssr和compiler-dom则是分别提供SSR环境下和DOM环境下的编译API。
compiler-ssr这部分不展开讲
vue编译器最主要的作用就是vue模板转换成渲染函数，然后再由vue渲染器渲染成DOM。
vue编译器的主要步骤是：
parse函数将vue单页面组件转换成模板ast，然后再调用transform函数将模板ast进行转换，最后调用generator函数将ast转换成渲染函数。
parse
vue解析模板最核心的代码存放在@vue/compiler-core下的parse.ts文件中。
vue解析模板的入口是baseParse函数。
复制 export function baseParse(
content: string,
options: ParserOptions = {}
): RootNode {
const context = createParserContext(content, options)
const start = getCursor(context)
return createRoot(
parseChildren(context, TextModes.DATA, []),
getSelection(context, start)
)
} 其中最重要的解析逻辑位于parseChildren函数中，其实parseChildren函数就相当于一个状态机了。
实际上vue源码要比我们前面写的代码复杂一些，因为vue考虑的情况更多，node的种类也比较多。下面是解析element和text生成的token。
复制 // 解析标签
function parseTag(
context: ParserContext,
type: TagType,
parent: ElementNode | undefined
): ElementNode | undefined{
// ...
return {
type: NodeTypes.ELEMENT, // 节点类型，例如root、element、text、comment等
ns, // Namespace
tag, // 标签名
tagType, // element、component、slot、template
props,
isSelfClosing, // 是否是自闭和标签
children: [],
loc: getSelection(context, start),
codegenNode: undefined // to be created during transform phase
}
}
// 解析文本
function parseText(context: ParserContext, mode: TextModes): TextNode {
// ...
return {
type: NodeTypes.TEXT,
content,
loc: getSelection(context, start)
}
} vue定义了很多函数来表示html解析状态，例如：
parseChildren： 代表data state。
parseElement：包含tag open state 和tag end state 两个阶段。
parseTag： 代表tag name state 。
按照HTML规范，每当进入另一个状态时，在代码的体现就是调用对应的函数。例如从data state到tag open state，实际上就是在parseChildren中调用parseElement函数。
复制 // 注意，为了方便理解，省略了部分不重要的代码
function parseChildren(
context: ParserContext,
mode: TextModes,
ancestors: ElementNode[]
): TemplateChildNode[] {
// ancestors是一个栈，调用last函数获取这个栈的栈顶元素
const parent = last(ancestors)
const ns = parent ? parent.ns : Namespaces.HTML
const nodes: TemplateChildNode[] = []
while (!isEnd(context, mode, ancestors)) {
const s = context.source
let node: TemplateChildNode | TemplateChildNode[] | undefined = undefined
if (mode === TextModes.DATA || mode === TextModes.RCDATA) {
if (!context.inVPre && startsWith(s, context.options.delimiters[0])) {
// 插值语法， 即匹配'{{'
node = parseInterpolation(context, mode)
} else if (mode === TextModes.DATA && s[0] === '<') {
// Tag open state
if (s.length === 1) {
emitError(context, ErrorCodes.EOF_BEFORE_TAG_NAME, 1)
} else if (s[1] === '!') {
// markup declaration open state.
if (startsWith(s, '<!--')) {
// 注释节点
node = parseComment(context)
} else if (startsWith(s, '<!DOCTYPE')) {
// 忽略文档声明.
node = parseBogusComment(context)
} else {
emitError(context, ErrorCodes.INCORRECTLY_OPENED_COMMENT)
node = parseBogusComment(context)
}
} else if (/[a-z]/i.test(s[1])) {
// tag open state
node = parseElement(context, ancestors)
} else {
emitError(context, ErrorCodes.INVALID_FIRST_CHARACTER_OF_TAG_NAME, 1)
}
}
}
if (!node) {
// 解析文本
node = parseText(context, mode)
}
if (isArray(node)) {
for (let i = 0; i < node.length; i++) {
pushNode(nodes, node[i])
}
} else {
pushNode(nodes, node)
}
}
// ...
return nodes
} 当出现不合规范的模板语法时，vue会通过emitError来发送error 提示用户，context对象包含当前解析字符的信息，包含source(模板字符串)、line(当前字符第几行)、column(当前字符第几列)、offset(当前字符串的偏移量)等 ，vue的错误处理机制会通过这些信息将错误代码复现给用户，以便快速找到错误。
ancestors事实上就相当于我们前面所说的nodeStack栈，通过这个栈来构建ast树结构，last(ancestors)实际上就是获取这个栈的栈顶元素，这个栈顶元素就是当前节点的父节点。
vue不会先扫描完source生成所有的token后再构建ast，而是边扫描source生成token边构建ast。
通过parse操作我们已经成功地将模板语法转换成了AST（抽象语法树），我们的最终目的是要将其转换成渲染函数代码，因此需要将前面的模板AST进行转换，以便后面更好地生成渲染函数代码。我们设计一个transform函数来实现。
transform函数位于@vue/compiler-core包下transform.ts文件中。
前面我们讲过，ast是一个N叉树，那么我们要将其转换就应该对它进行深度优先遍历。我们使用traverseNode函数实现深度遍历逻辑，为了方便，我们将循环遍历node.children的操作放到traverseChildren函数里。
复制 function traverseNode(node, context) {
context.currentNode = node;
context.childrenIndex = 0;
/* 处理逻辑 */
if (node.type === 'element' && node.props.find(i=>i.name==='if')) {
// ...
}
if (node.type === 'element' && node.props.find(i=>i.name==='slot')) {
// ...
}
// 这里省略一大段代码
// if ...
// 深度优先遍历
if (node.type === "element" || node.type === "root") {
traverseChildren(node.context);
} else if (node.type === "comment") {
// ...
}
context.currentNode = node
}
function traverseChildren(parent, context) {
for (let i = 0; i < parent.children.length; i++) {
const child = parent.children[i];
context.parent = parent;
context.childIndex = i;
traverseNode(child, context);
}
}
const nodes = [
{
type: "root",
children: [
{
type: "element",
tag: "div",
children: [
{
type: "element",
tag: 'h1',
props: [{
name: "foo",
value: "value"
}],
children: [
{
type: "text",
value: "Hello World",
},
],
},
],
},
{
type: "element",
tag: "br",
children: [],
},
],
},
];
traverseNode(nodes, context) 随着转换逻辑越来越多，越来越复杂，我们的traverseNode 函数也会越来越臃肿，因此我们可以将这些转换逻辑提取到一个个函数中去。更好的办法是以插件化的形式来实现，也就是将这些转换函数当成一个个插件放到一个插件数组中去，然后循环调用这个插件数组中的每一个插件函数，这个插件数组就是context.nodeTransforms。
在执行这些插件函数时会将上下文context对象一同传入，我们可以提前将一些信息挂载到这个上下文对象中，例如将当前处理的node对象挂载到context.currentNode中，之后在插件函数执行时就可以通过这个context对象来获取一些我们想要的信息，例如当前节点类型context.currentNode.type 。
复制 function traverseNode(node, context) {
context.currentNode = node;
context.childrenIndex = 0;
/* 处理逻辑 */
const { nodeTransforms } = context;
for (let i = 0; i < nodeTransforms.length; i++) {
nodeTransforms[i](node);
}
// ...
}
traverseNode(nodes, {
nodeTransforms: [
transformOnce,
transformIf,
transformMemo,
transformFor,
...(__COMPAT__ ? [transformFilter] : []),
...(!__BROWSER__ && prefixIdentifiers
? [
// order is important
trackVForSlotScopes,
transformExpression,
]
: __BROWSER__ && __DEV__
? [transformExpression]
: []),
transformSlotOutlet,
transformElement,
trackSlotScopes,
transformText,
],
}); generate
现在就只差最后一步了，那就是生成渲染函数代码，这部分由generate函数完成。
generate的逻辑存放在@vue/compiler-core包下的codegen.ts文件中。
codegenNode
transform后的ast存放在ast.codegenNode属性中。例如下面这段代码，经过parse和transform后会变成这样：
复制 <div>
<h1 :foo="num">Hello World</h1>
</div>
复制 codegenNode = {
type: 13,
tag: "div",
props: undefined,
children: [
{
type: 1,
ns: 0,
tag: "h1",
tagType: 0,
props: [
{
type: 7,
name: "bind",
exp: {
type: 4,
content: "_ctx.num",
isStatic: false,
constType: 0,
loc: {
// ...
source: "num",
},
},
arg: {
type: 4,
content: "foo",
isStatic: true,
constType: 3,
loc: {
// ...
source: "foo",
},
},
modifiers: [
],
loc: {
// ...
source: ":foo=\"num\"",
},
},
],
isSelfClosing: false,
children: [
{
type: 2,
content: "Hello World",
loc: {
// ...
source: "Hello World",
},
},
],
loc: {
// ...
source: "<h1 :foo=\"num\">Hello World</h1>",
},
codegenNode: {
type: 13,
tag: "\"h1\"",
props: {
type: 15,
loc: {
// ...
source: "<h1 :foo=\"num\">Hello World</h1>",
},
properties: [
{
type: 16,
loc: {
source: "",
// ...
},
key: {
type: 4,
content: "foo",
isStatic: true,
constType: 3,
loc: {
// ...
source: "foo",
},
},
value: {
type: 4,
content: "_ctx.num",
isStatic: false,
constType: 0,
loc: {
// ...
source: "num",
},
},
},
],
},
children: {
type: 2,
content: "Hello World",
loc: {
// ...
source: "Hello World",
},
},
patchFlag: "8 /* PROPS */",
dynamicProps: {
type: 4,
loc: {
source: "",
// ...
},
content: "_hoisted_1",
isStatic: false,
constType: 2,
hoisted: {
type: 4,
loc: {
source: "",
// ...
},
content: "[\"foo\"]",
isStatic: false,
constType: 0,
},
},
directives: undefined,
isBlock: false,
disableTracking: false,
isComponent: false,
loc: {
// ...
source: "<h1 :foo=\"num\">Hello World</h1>",
},
},
},
],
patchFlag: undefined,
dynamicProps: undefined,
directives: undefined,
isBlock: true,
disableTracking: false,
isComponent: false,
loc: {
// ...
source: "<div>\r\n\t\t<h1 :foo=\"num\">Hello World</h1>\r\n\t</div>",
},
} codegenNode存放着能够生成渲染函数的一切信息，我们可以通过遍历codegenNode来生成渲染函数代码。
在经过generate后会生成最终的渲染函数代码：
复制 import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createElementBlock("div", null, [
_createElementVNode("h1", { foo: _ctx.num }, "Hello World", 8 /* PROPS */, ["foo"])
]))
} 首先渲染函数以函数声明开头，因此我们可以直接写出：
复制 const functionName = ssr ? `ssrRender` : `render`;
const args = ssr ? ['_ctx', '_push', '_parent', '_attrs'] : ['_ctx', '_cache'];
if (options.bindingMetadata && !options.inline) {
// binding optimization args
args.push('$props', '$setup', '$data', '$options');
}
const signature = options.isTS
? args.map(arg => `${arg}: any`).join(',')
: args.join(', ');
push(`function ${functionName}(${signature}) {`);
indent()
push(`return `)
genNode(ast.codegenNode, context)
deindent()
push(`}`)
function push(code){
context.code += code; // 将代码添加到context.code中
// 。。。省略一些处理
} functionName是渲染函数的函数名，signature 则是函数形参。push函数主要的作用是将code代码添加到context.code中，indent 和deindent函数则是为生成的context.code增加/删除缩进。
genNode()
genNode 函数则是生成渲染函数内部逻辑的方法。
复制 function genNode(node: CodegenNode | symbol | string, context: CodegenContext) {
if (isString(node)) {
context.push(node)
return
}
if (isSymbol(node)) {
context.push(context.helper(node))
return
}
switch (node.type) {
case NodeTypes.ELEMENT:
case NodeTypes.IF:
case NodeTypes.FOR:
__DEV__ &&
assert(
node.codegenNode != null,
`Codegen node is missing for element/if/for node. ` +
`Apply appropriate transforms first.`
)
genNode(node.codegenNode!, context)
break
case NodeTypes.TEXT:
genText(node, context)
break
case NodeTypes.SIMPLE_EXPRESSION:
genExpression(node, context)
break
case NodeTypes.INTERPOLATION:
genInterpolation(node, context)
break
case NodeTypes.TEXT_CALL:
genNode(node.codegenNode, context)
break
case NodeTypes.COMPOUND_EXPRESSION:
genCompoundExpression(node, context)
break
case NodeTypes.COMMENT:
genComment(node, context)
break
case NodeTypes.VNODE_CALL:
genVNodeCall(node, context)
break
// ...
default:
if (__DEV__) {
assert(false, `unhandled codegen node type: ${(node as any).type}`)
// make sure we exhaust all possible types
const exhaustiveCheck: never = node
return exhaustiveCheck
}
}
} codegenNode 本质上是一颗N叉树，因此vue采用递归的方式进行深度遍历。例如在创建元素vnode时(即生成_createElementVNode函数时)，genNode会调用genVNodeCall函数(此时node.type===NodeTypes.VNODE_CALL)，genVNodeCall函数内部会调用genNodeList函数，而genNodeList函数又会遍历node.children并将其作为参数传入genNode函数中。
复制 function genVNodeCall(node: VNodeCall, context: CodegenContext) {
const { push, helper, pure } = context
const {
tag,
props,
children,
patchFlag,
dynamicProps,
directives,
isBlock,
disableTracking,
isComponent
} = node
// ...
genNodeList(
genNullableArgs([tag, props, children, patchFlag, dynamicProps]),
context
)
push(`)`)
// ...
}
function genNodeList(
nodes: (string | symbol | CodegenNode | TemplateChildNode[])[],
context: CodegenContext,
multilines: boolean = false,
comma: boolean = true
) {
const { push, newline } = context
for (let i = 0; i < nodes.length; i++) {
const node = nodes[i]
if (isString(node)) {
push(node)
} else if (isArray(node)) {
genNodeListAsArray(node, context)
} else {
genNode(node, context)
}
if (i < nodes.length - 1) {
if (multilines) {
comma && push(',')
newline()
} else {
comma && push(', ')
}
}
}
} helper()
vue渲染函数内部会调用不同的函数来创造不同类型的vnode，而这些函数名都保存在helperNameMap中。
复制 export const helperNameMap: any = {
[FRAGMENT]: `Fragment`,
[TELEPORT]: `Teleport`,
[SUSPENSE]: `Suspense`,
[KEEP_ALIVE]: `KeepAlive`,
[BASE_TRANSITION]: `BaseTransition`,
[OPEN_BLOCK]: `openBlock`,
[CREATE_BLOCK]: `createBlock`,
[CREATE_ELEMENT_BLOCK]: `createElementBlock`,
[CREATE_VNODE]: `createVNode`,
[CREATE_ELEMENT_VNODE]: `createElementVNode`,
[CREATE_COMMENT]: `createCommentVNode`,
[CREATE_TEXT]: `createTextVNode`,
[CREATE_STATIC]: `createStaticVNode`,
[RESOLVE_COMPONENT]: `resolveComponent`,
[RESOLVE_DYNAMIC_COMPONENT]: `resolveDynamicComponent`,
[RESOLVE_DIRECTIVE]: `resolveDirective`,
[RESOLVE_FILTER]: `resolveFilter`,
[WITH_DIRECTIVES]: `withDirectives`,
[RENDER_LIST]: `renderList`,
[RENDER_SLOT]: `renderSlot`,
[CREATE_SLOTS]: `createSlots`,
[TO_DISPLAY_STRING]: `toDisplayString`,
[MERGE_PROPS]: `mergeProps`,
[NORMALIZE_CLASS]: `normalizeClass`,
[NORMALIZE_STYLE]: `normalizeStyle`,
[NORMALIZE_PROPS]: `normalizeProps`,
[GUARD_REACTIVE_PROPS]: `guardReactiveProps`,
[TO_HANDLERS]: `toHandlers`,
[CAMELIZE]: `camelize`,
[CAPITALIZE]: `capitalize`,
[TO_HANDLER_KEY]: `toHandlerKey`,
[SET_BLOCK_TRACKING]: `setBlockTracking`,
[PUSH_SCOPE_ID]: `pushScopeId`,
[POP_SCOPE_ID]: `popScopeId`,
[WITH_SCOPE_ID]: `withScopeId`,
[WITH_CTX]: `withCtx`,
[UNREF]: `unref`,
[IS_REF]: `isRef`,
[WITH_MEMO]: `withMemo`,
[IS_MEMO_SAME]: `isMemoSame`
} vue通过调用helper函数来获取这些函数名，例如_createCommentVNode ：
复制 function helper(key) {
return `_${helperNameMap[key]}`;
}
function genComment(node: CommentNode, context: CodegenContext) {
const { push, helper, pure } = context
if (pure) {
push(PURE_ANNOTATION)
}
push(`${helper(CREATE_COMMENT)}(${JSON.stringify(node.content)})`, node)
} Block
渲染函数和我们平常使用的h函数它们的目的都是为了创建vnode。但是经过模板编译生成的渲染函数比h函数多了一个令人困惑的Block ：
复制 export function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createElementBlock("div", null, [
_createElementVNode("h1", { foo: _ctx.num }, "Hello World", 8 /* PROPS */, ["foo"])
]))
} 这里我们引入一个概念“区块”(Block)，内部结构是稳定的一个部分可被称之为一个区块。在这个用例中，整个模板只有一个区块，因为这里没有用到任何结构性指令 (比如 v-if 或者 v-for )。
**每一个块都会追踪其所有带更新类型标记的后代节点 (不只是直接子节点)。**所谓的更新标记是指patchFlag ，例如上面代码中patchFlag就是8 。patchFlag的作用是为了提升虚拟 DOM 运行时性能，一个元素可以有多个更新类型标记，它们会被合并成一个数字。运行时渲染器也将会使用位运算来检查这些标记，确定相应的更新操作。
假如这里使用v-if等结构性指令，那么模板编译后的渲染函数是这样的：
复制 <div>
<h1 v-if="isShow">Hello World</h1>
</div>
// 编译后的代码
import { openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode } from "vue"
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createElementBlock("div", null, [
(_ctx.isShow)
? (_openBlock(), _createElementBlock("h1", { key: 0 }, "Hello World"))
: _createCommentVNode("v-if", true)
]))
} openBlock必须要在“createBlock”前调用，它会初始化currentBlock，并将该currentBlock加入到blockStack中。由于Block树是能够嵌套的，因此用一个栈结构来存放所有的Block树。
复制 // Since v-if and v-for are the two possible ways node structure can dynamically
// change, once we consider v-if branches and each v-for fragment a block, we
// can divide a template into nested blocks, and within each block the node
// structure would be stable. This allows us to skip most children diffing
// and only worry about the dynamic nodes (indicated by patch flags).
export const blockStack: (VNode[] | null)[] = []
export let currentBlock: VNode[] | null = null
/**
* Open a block.
* This must be called before `createBlock`. It cannot be part of `createBlock`
* because the children of the block are evaluated before `createBlock` itself
* is called. The generated code typically looks like this:
*
* ```js
* function render() {
* return (openBlock(),createBlock('div', null, [...]))
* }
* ```
* disableTracking is true when creating a v-for fragment block, since a v-for
* fragment always diffs its children.
*
* @private
*/
export function openBlock(disableTracking = false) {
blockStack.push((currentBlock = disableTracking ? null : []))
}
export function closeBlock() {
blockStack.pop()
currentBlock = blockStack[blockStack.length - 1] || null
} 后面的createElementBlock函数内部会先调用createBaseVNode函数创建vnode，然后再调用setupBlock函数。此外渲染函数中用于创建元素vnode的createElementVNode函数其实就是createBaseVNode 函数的别名。
复制 // createElementVNode函数其实就是createBaseVNode函数的别名
export { createBaseVNode as createElementVNode }
export function createElementBlock(
type: string,
props?: Record<string, any> | null,
children?: any,
patchFlag?: number,
dynamicProps?: string[],
shapeFlag?: number
) {
return setupBlock(
createBaseVNode(
type,
props,
children,
patchFlag,
dynamicProps,
shapeFlag,
true /* isBlock */
)
)
}
function createBaseVNode(
type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT,
props: (Data & VNodeProps) | null = null,
children: unknown = null,
patchFlag = 0,
dynamicProps: string[] | null = null,
shapeFlag = type === Fragment ? 0 : ShapeFlags.ELEMENT,
isBlockNode = false,
needFullChildrenNormalization = false
) {
// ...
// track vnode for block tree
if (
isBlockTreeEnabled > 0 &&
// avoid a block node from tracking itself
!isBlockNode &&
// has current parent block
currentBlock &&
// presence of a patch flag indicates this node needs patching on updates.
// component nodes also should always be patched, because even if the
// component doesn't need to update, it needs to persist the instance on to
// the next vnode so that it can be properly unmounted later.
(vnode.patchFlag > 0 || shapeFlag & ShapeFlags.COMPONENT) &&
// the EVENTS flag is only for hydration and if it is the only flag, the
// vnode should not be considered dynamic due to handler caching.
vnode.patchFlag !== PatchFlags.HYDRATE_EVENTS
) {
currentBlock.push(vnode)
}
return vnode
}
function setupBlock(vnode: VNode) {
// save current block children on the block vnode
vnode.dynamicChildren =
isBlockTreeEnabled > 0 ? currentBlock || (EMPTY_ARR as any) : null
// close block
closeBlock()
// a block is always going to be patched, so track it as a child of its
// parent block
if (isBlockTreeEnabled > 0 && currentBlock) {
currentBlock.push(vnode)
}
return vnode
} 可以看到currentBlock在追踪当前Block树的所有**带更新类型标记的后代节点。**最后在setupBlock函数中将所有带更新类型标记的后代节点挂载到Block节点的dynamicChildren属性下，这与官网的对Block的描述相对应。
总结
Vue模板编译的目的是将模板转换成渲染函数，期间会经过解析（parse）、转换（transform）和生成（generate）等操作，最终形成浏览器能够识别的JavaScript代码。
复制 template -> (parse) -> ast -> (transform) => codegenNode -> (generate) -> render Vue模板编译主要依靠vue-compiler完成，将模板转换成渲染函数的目的是生成vnode，以便后续的vue-runtime能够动态更改视图（DOM）。