这里给大家分享我在网上总结出来的一些知识 ，希望对大家有所帮助
在解析阶段 ，Vue将这个模板解析为AST的结构：
{
type: element,
tag: div,
attrsList: [],
children: [
{
type: element,
tag: h1,
attrsList: [],
children: [{ type: expression, expression: title }]
},
{
type: element,
tag: ul,
attrsList: [],
children: [
{
type: element,
tag: li,
attrsList: [{ name: v-for, value: item in items }],
children: [{ type: expression, expression: item }]
}
]
}
]
}
2.代码生成阶段
在这个阶段 ，Vue将AST转换为渲染函数 。渲染函数是一个JavaScript函数 ，它接收一个上下文对象作为参数 ，并返回一个VNode（虚拟节点）对象 ，表示要渲染的DOM树结构 。在渲染函数中 ，Vue会将模板中的HTML标签转换为createElement函数调用 ，将指令和表达式转换为相应的JavaScript代码 。
例如 ，对于上面的模板 ，生成的渲染函数大致如下：
function render(_ctx, _cache) {
return _openBlock(), _createBlock("div", null, [
_createVNode("h1", null, _toDisplayString(_ctx.title), 1 /* TEXT */),
_createVNode("ul", null, [
(_cache[item] || (_cache[item] = _withDirectives((_openBlock(), _createBlock("li", {
key: item
}, _toDisplayString(item), 1 /* TEXT */)), [[_directive_resolveModel, _ctx.items, item]])))
])
])
}
在上面的渲染函数中 ，我们可以看到通过调用Vue提供的_createVNode函数和_createBlock函数来创建虚拟节点 ，并使用_toDisplayString函数来将表达式的值转换为字符串 。同时 ，在循环中使用了_cache对象来缓存已渲染的VNode ，以提高渲染性能 。
总的来说 ，Vue的模板编译过程将模板字符串转换为一个JavaScript函数 ，该函数接收一个上下文对象作为参数 ，并返回一个VNode对象 ，表示要渲染的DOM树结构 。这个过程中 ，Vue将模板中的HTML标记和指令转换为JavaScript函数调用 ，同时对表达式进行解析和优化 ，以生成更高效的渲染函数 。
举一个更具体的例子 ，考虑下面这个Vue模板：
<template>
<div class="wrapper">
<h1>{{ message }}</h1>
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
</div>
</template>
在编译过程中 ，Vue将模板字符串解析为AST的结构 ，如下所示：
{
type: element,
tag: div,
attrsList: [{ name: class, value: wrapper }],
children: [
{
type: element,
tag: h1,
attrsList: [],
children: [{ type: expression, expression: message }]
},
{
type: element,
tag: ul,
attrsList: [],
children: [
{
type: element,
tag: li,
attrsList: [{ name: v-for, value: item in items }],
children: [{ type: expression, expression: item }]
}
]
}
]
}
然后 ，Vue将AST转换为一个渲染函数 ，如下所示：
function render(_ctx, _cache) {
return _openBlock(), _createBlock("div", { class: "wrapper" }, [
_createVNode("h1", null, _toDisplayString(_ctx.message), 1 /* TEXT */),
_createVNode("ul", null, [
(_cache[item] || (_cache[item] = _withDirectives((_openBlock(), _createBlock("li", {
key: item
}, _toDisplayString(item), 1 /* TEXT */)), [[_directive_resolveModel, _ctx.items, item]])))
])
])
}
在渲染函数中 ，我们可以看到Vue将HTML标记转换为_createVNode和_createBlock函数的调用 ，将指令和表达式转换为相应的JavaScript代码 ，并使用_toDisplayString函数将表达式的值转换为字符串 。最终生成的渲染函数会被Vue用来渲染组件的实例 。
本文转载于:
https://juejin.cn/post/7221354195914326073
如果对您有所帮助 ，欢迎您点个关注 ，我会定时更新技术文档 ，大家一起讨论学习 ，一起进步 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
