vue 抽象语法树,ast抽象语法树详解
本文主要介绍Vue编译器AST抽象语法树源代码的详细分析。有需要的朋友可以借鉴一下，希望能有所帮助。祝大家进步很大，早日升职加薪。
目录
介绍baseCompile的主要核心代码如何写程序识别Tokenparse函数解析模板字符串
引言
第一部分：Vue编译器的源代码分析；编译分析
baseCompile主要核心代码
//` createcompilerkreator `允许创建使用替代的编译器
//解析器/优化器/codegen，例如SSR优化编译器。
//这里我们只是用默认的部分导出一个默认的编译器。
var create compiler=createCompilerCreator(function base compile(
模板，
选择
) {
var ast=parse(template.trim()，options)；
if (options.optimize！==假){
}
var code=generate(ast，options)；
返回{
ast: ast，
render: code.render，
staticRenderFns:code . staticRenderFns
}
});
可以看到baseCompile的代码很短，主要核心代码。
var ast=parse(template.trim()，options)；Parse会定期解析模板template中的指令、类、样式等数据，形成AST。优化(ast，options)；optimize的主要功能是标记静态节点，这是Vue在编译过程中的一个优化。后来更新接口的时候会有一个补丁过程，diff算法会直接跳过静态节点，这样就减少了比较过程，优化了补丁的性能。var code=generate(ast，options)；生成目标平台需要的代码，将AST转换成render函数字符串的过程，结果是render字符串和staticRenderFns字符串。最终基本编译的返回值
{
ast: ast，
render: code.render，
staticRenderFns:code . staticRenderFns
}
最后返回抽象语法树(ast)、渲染函数(render)和静态渲染函数(staticrenderfs)，render的值为code.render，staticrenderfs的值为code.staticRenderFns，也就是说ast经过generate处理后得到的返回值code是一个对象。
接下来，我们来关注一下Vue的解析器，它是如何将一个字符串模板解析成抽象语法树(AST)的。
var ast=parse(template.trim()，options)；
在解释parse之前，您需要对编译过程及其技术要点有一个宏观和一般的了解。
引用自维基百科：
其主要目的是把用便于人们编写、阅读和维护的高级计算机语言编写的源代码程序翻译成计算机能够解释和运行的低级机器语言程序。一般源代码都是高级语言，比如Pascal，C，C，C#，Java等。而目标语言是目标机器的汇编语言或目标代码。
编译器的技术分为三个部分：词法分析、语法分析和语义分析。通常，编译器的第一项工作叫做词法分析。就像读一篇文章，是由一个个中文单词组成的。过程是一样的，只不过这里不叫单词，叫“词汇令牌”，英文叫Token。
div id= app v-if= ret { { message } }/div
编译器会识别这些标签div a span，属性和指令如id类style v-if v-for，以及插值操作如花括号等。这些是代币。
如何写一个程序来识别 Token
那么，如何编写识别Token的程序呢？
实际上，我们可以通过手写程序拟定一些规则来区分每个不同的令牌。这些规则用“正则语法”来表示，符合正则语法的表达式称为“正则表达式”。通过它们来完成具体的词法分析工作。
编译器工作的下一个阶段是解析。词法分析是对单词进行一个一个的识别，语法分析是在词法分析的基础上识别一个程序的语法结构。这个结构是树形结构，计算机很容易理解和执行。
程序还应该定义一个好的语法结构，它的语法分析过程就是构造这样一棵树。程序是一棵树，称为抽象语法树(AST)。树的每个节点(子树)都是一个语法单元，这个单元的构成规则称为“语法”。
我们这里要讲的解析器是编译器处理源代码的第一步。解析器将一定格式的文本(字符串)转换成具有一定数据结构的程序(对象)，而这种数据结构是编译器能够理解的，因为编译器的后续步骤，如上述的语法分析、类型检查/派生、代码优化、代码生成等。都依赖于这个数据结构。
注意：parse parser这两个词不应该混淆。Parse是一个动词，代表“解析”的过程。Parser是名词，代表“解析器”。
Vue的编译器也不例外。在词法分析阶段，Vue将把字符串模板解析成标记，这些标记将在语法分析阶段使用。在语法分析阶段，会根据令牌生成一个AST，最后根据AST生成最终的渲染函数，从而完成代码生成。
var ast=parse(template.trim()，options)；
parse 函数解析模板字符串
回到前面的代码，我们知道parse函数用于解析模板字符串并最终生成AST。
函数解析(模板，选项){
//省略.
parseHTML(模板，{
警告，
expectHTML: options.expectHTML，
isUnaryTag: options.isUnaryTag，
canBeLeftOpenTag:options . canBeLeftOpenTag，
shouldDecodeNewlines: options，
shouldDecodeNewlinesForHref:options . shouldDecodeNewlinesForHref，
should keep comment:options . comments，
开始(标签、属性、一元){
//省略.
},
end () {
//省略.
},
chars(文本：字符串){
//省略.
},
注释(文本：字符串){
//省略.
}
})
返回根目录
}
应该注意，在parse函数中，主要通过调用parseHTML函数来解析模板字符串。实际上，parseHTML函数用于词法分析，而parse函数用于基于词法分析的语法分析，以生成一个AST。本节主要分析Vue如何对模板字符串进行词法分析，即parseHTML函数的实现。
接下来，我们的章节将分为两个方向
一：parseHTML函数源代码分析
二：Vue编译器的令牌解析规则——规范分析
以上是Vue编译器AST抽象语法树源代码分析的详细内容。更多关于Vue编译器AST抽象语法树的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。