Vue.js是最受欢迎的前端框架之一，一些概念和原则仍然需要理解和深入了解我们的前端开发人员。
vue.js，一些重要概念涉及许多知识点， ETC。
现在，专注于使用图形步骤分析编译器的简单工作原理；
编译器实际上是一个代码程序。它将一种语言（）编译为另一种语言（）。前者通常称为源代码，后者通常称为目标代码。例如，我们vue的前端项目的文件通常是源代码，并且编译文件中的文件是目标代码；此过程称为compilation（）
主要概念：
标准编译器过程如下图所示：
这样，其汇编过程将与上图不同。对于源代码，源代码是组件的模板代码，目标代码是可以在浏览器（或其他平台）平台上运行的代码。
目标代码实际上是渲染函数（函数）。在概述的术语中，编译器首先分析模板的短语和语法分析，然后获得模板的抽象语法树（）。最后将其转换为代码和渲染函数。简单的vue.js模板编译器的工作流量如下：
如下：
模板代码
目标AST
目标代码
从上面的代码可以看出，它实际上是具有层次结构的对象。模板具有与模板相同的嵌套结构。每个模板具有逻辑根节点，即类型，模板中的真实根节点用作节点的存在。
可以看到：
通过包装函数，模板的词汇分析和语法分析最终将获取模板的AST。该函数接收模板字符串作为参数，并将分辨率作为返回值返回；
解析器如何将模板字符串划分？这是一台有限的状态自动机器。它是指有限状态之间的。作为角色输入，解析器将自动在不同状态之间切换（实际上，可以使用正则表达式实现有限状态机）。
简单的状态机流程图：
通过有限的状态机的原理，我们可以帮助我们完成模板标记，并最终将获得一系列（词汇标记号）。
假设以下代码：
上述代码HTML结构生成的AST数据结构是相同的，所有这些都是树结构
接下来要做的是转换生成的生成的生成，需要在转换过程中维护。该堆栈将用于维持元素之间的父森关系。遇到标签时，我们会创建一种AST节点的类型，然后按堆栈中。同样，每当我们遇到端标签节点时，我们都会弹出当前堆栈顶部的节点。在这种方式中，堆栈顶部的节点将始终扮演父节点的角色。转换期间的所有节点过程将用作当前堆栈顶部节点的子节点，并添加到堆栈顶点的属性中。该过程如下所示：
在开始时，只有根节点root root
当第一个标签是启动节点时，我们创建了一种AST节点的类型，并将节点用作当前节点的子节点。由于当前顶部节点是节点，因此添加了新创建的节点作为子节点作为子节点作为子节点。节点和新建造的节点最终被压入堆栈中。
由于第二个节点也是启动标签，因此该过程与上面相同，但是当前的顶部节点是当前节点，因此当前节点被添加为中间的子节点，并最终按下节点进入堆栈。
下一个节点是一个文本节点，因此您需要创建一种节点，并将其添加为最高节点的子节点，以添加到AST中。不同的时间，当前的接收不是类型，因此您无需按下堆栈。
以下是末端标签节点。根据规则，需要弹出当前堆栈顶部的节点。
随后的过程不再累
最后完成后的效果如下：
现在让我们实现解析功能
以上是Parse功能的简短版本的实现。当然，与vue.js的源代码相比，有很多差异，但是基本原理大致相同。
以下仅对功能和功能进行了简短的解释。请期待具体的实施原则；
以上是模板编译器的基本结构和工作流程。它有三个主要组成：
本文主要讨论解析器的基本实施原则（实际上，vue.js的实际实现要复杂得多，例如常规分析，VUE语法分析V-if，v-show，v-show，内部插值{{}}等。和内部插值），以及使用有限的状态自动机器来构建短语分析仪。该过程是不同状态之间状态机之间迁移的过程，并生成一个令牌列表集合。然后使用令牌列表集合和顶级节点元素堆栈来构造可以描述为模板的AST，并最终将模板AST用于将其分析为JavaScript AST和渲染功能。
作者：gfe-absolute零学位
版权属于作者。对于业务重印，请与作者联系以获得授权。请指示非商业重印的来源。
vue.js源代码；
vue.js设计和实施；
原始：https：//juejin.cn/post/7103425765600919559