一周的紧张局势，作者的前端组中的每个人都编写了一篇文章，并汇编了作者的想法。建议在查看本文之前，请单击此处以预览整个过程的想法和想法。
本文介绍了Vue Compile中解析部分的源代码分析，也就是说，从模板到Astelemnt分析。
从对作者的Vue汇编思想的详细解释中，我们已经知道，这四个过程的汇编是分析，优化，代码生成和渲染。我不会在此处详细介绍以获取特定详细信息，并附加了上一张图片。
当然，本文旨在分析从思想到源代码的分析。
作者首先列出了在查看源代码之前需要预览的一些概念和准备。
解析的最终目标是生成具有许多属性的震惊树，其中许多属性来自标签的某些属性。类似于v-for，v-if，v-bind等。ASTELEMENT的节点属性。在这里示例：
到达
可以看出，V-FOR的属性已被解析并从Astelement上存在的多个属性中删除。该功能来自常规功率的幂。LET列表一些重要的常规预热。
常规基础差的学生可以首先学习两篇常规文章，尤其是详细的：
轻松进入正则表达式表达式
恶魔
并带两个网站供每个人进行常规学习。
常规测试
常规图
一次看到这么多的常规生物有点头晕。不要惊慌，这里有一些复杂的规律性。
属性和动力学分别分别获得普通属性和动态属性的正则表达式。每个人都必须熟悉普通属性，这是动态属性的解释。
通过更改attrname的传输属性的键值（非动态属性只能修改val值）。
让我们详细说明这种一般规律性：
但是，详细的分裂总共有五组。
此数据包与非空格匹配，”，'，'，，<、>，/，=和其他符号字符串。属性的主要值部分是匹配的。以下属性：
（[^s“''<>/=]+）将匹配ID。
它将匹配=数字，第二个将匹配该空间。
因为，它将与之匹配，如果匹配该容器，它将匹配。
VUE源代码的常规方案基本上考虑了大多数情况。
在这种情况下，我们应该更清楚，让我们总结一下：
所有可以确保可以包括属性的情况。应注意，常规处理后的数组格式为：
当您谈论下面的源代码时，您会知道此数组格式是attribute的原始状态。解析将在稍后将此属性处理为attrmap的形式，如下所示：
关于此常规，我们附上一个说明图：
关于Dynamicargattribute，它是相似的：
主要是，即[名称]或[name]键，附加常规详细说明图：
标签主要包括开始标签（例如）和端标签（例如），以下常规标签为：
标签的匹配是基于qnamecapture，所以这是什么东西？实际上，qname是类似于xml：xxx的标签，因此starttagopen是匹配或标签。
您可以瞥见，对吗？直接输入标签。
for标签更重要，匹配略有复杂。这是一个详细的解释：
首先，规律性定期取决于属性。我们将在V-For中获得内容。例如，我们最终将处理地图的形式，该形式大致如下：
换句话说，我们将根据我们定期匹配。首先看的数据包总共有两个数据包和和谐匹配。此处的示例相对简单。实际上，以前或以前的内容可能更多此时，复杂的（例如或什至可能）开始起作用。总共有两个数据包。实际上，他们获得的最后两个参数。每个人都知道Vue可以为对象的周期做到这一点。示例如下：
最后。最后，它将被放置在震惊中。
好吧，关于常规情况如此之多，具体情况仍然必须自己查看源代码。
在开始谈论源代码之前，首先介绍源代码的结构。
该模块大致有一些功能，并且给出了代码：
第二个模块是某些解析功能中的全局徽标和存储容器。代码如下：
第三模块是核心部分，即模板的一部分。一旦执行此功能，模块2的根2将成为具有震惊作为节点的DOM树。
，其代码大致：
ParseHTML功能和选项是解析的关键。选项包括许多平台配置和四种处理方法。如下：
作者以前的解析思想文章介绍了两个处理功能的开始和结尾。一种是创造一个震惊，另一个是建立父亲的关系。详细信息将在下面详细介绍。这也是本文的重点。
字符函数由文本节点处理，并通过注释节点处理评论。请记住，这四个函数至关重要，以下将由代码解释。
Vue的HTML解析不是一步。让我们首先介绍一些关键功能功能
早些时候，我们说它用于匹配标签。它的功能是使用此常规，匹配标签并创建初始数据结构匹配以保存相应的属性。对于开始标签中的所有属性，例如ID，类，V-Bind，将保存为匹配。
代码显示如下：
在上述空间中，我们将起始标签的结尾用作终端条件。
除了确定它是否结束外，还有一个可以确定它是否是一个羽毛标签。一个yuan标签是仅一个标签的元素。以后将使用此标记。
parsestarttag的目标是相对原始的，类似于类似
可以将匹配大致概括为获取标签，属性和位置信息。并将其传递给下一个功能。
HandlestartTag本身的效果实际上非常简单和直接，也就是说，匹配的属性是重新处理的，因为它以前是数组结构。在这里，他们将所有数组attr变成一个对象。该过程大致如下：
由此：
这样就这样了：
然后有一些特殊待遇。
这是处理某些异常情况。例如，PAG的内部DIV，浏览器将经过专门处理，并且VUE将尽可能与浏览器一致。特定的参考P标准标准。
最后，HandleStartTag将调用Parse通过的开始（1）函数进行处理，并且开始功能将在以下内容中详细说明。
Pareseendtag本身的功能特别简单，可以直接调用选项传递的最终功能，但是当我们观看源代码时，我们会发现源代码很长。
看起来很长，实际上，它主要是执行选项。VUE的源代码具有许多正在处理特殊情况的代码，因此看起来肿了。此功能有两个主要情况：
在处理DIV标签时，根据POS的位置，将遍历POS之前的所有标签和匹配标签，以一起执行终点函数。
目前可能会遇到和标记，P标签将使用浏览器，第一个启动和结束。BR是一个毛线标签，直接输入最终效果。
启动功能很长。
结构如下：
最终功能很短
第一件事终点功能是将当前堆栈的父元素删除到当前份量，然后执行关闭元素以创建完整的树节点关系。因此，封闭是最终功能的焦点。
让我们在下面详细解释
主要进行五项操作：
ProcessElement是关闭元件的非常重要的处理功能。首先输入代码。
可以看出，它主要是ProcessKey，ProcessRef，ProcessSlotContent，ProcessSlotEtlet，ProcessComponent，ProcessAttrs，以及最后一次穿越的转换。
让我们一一讨论，给所有人留下深刻的印象。实际上，将来将对功能的功能进行详细的解释。
让我们谈谈组件中的属性，主要是插槽标签的名称属性，该属性由ProcessLotOutlet完成。
第二个是拾取需要替换的内容，即processlotcontent，它是处理组件内显示显示的插槽，但是在这个地方，它只是添加了D域的slotscope和lottargetEL的插槽，这是target.slot。
ProcessComponent不是处理组件，而是动态组件的属性。过程是获得所有属性和动态属性。
变换是一个处理类和样式的函数数组。我不会在此处详细介绍。
ifconditins块的最终格式大致是：
这是条件显示的数组，EXP存储所有显示条件。如果是其他，则不确定。
lottantarget的作业是由过程完成的，这是所有插槽以对象的形式向当前寄生虫创建的SpopeedSlots。在零件的内部示例中，可以方便地使用V.slot。请参阅VM的初始化。$插槽。
如果您不进行特定的介绍，则应该自己研究。
字符主要处理两个中文文本：静态文本和表达式，例如：
名称是静态文本，创建的类型为3。3。
在这个地方，名称是一个表达式，创建的节点类型为2。
摘要：普通标签类型为1，纯文本类型为2，表达式类型为3。
它也是一个纯文本，但是添加了节点的徽标：true。
上面完成了一些重要功能的解释，以及以下标识符的探索。
我们的主要目的是了解解析的主要目的和过程。我不会在一些精美的分支中详细介绍。
parsehtml函数的结构如下：
parsehtml的原则是连续识别和向前发展各种规律性的过程。
Starttagopen将首先匹配，然后索引将四个位置提高到4，将HTML前面删除到部分，然后匹配。索引前进到8个位置至13个位置，该空间将被视为一个位置，HTML删除了这一部分。然后匹配文本，最后定期匹配端码。这已经结束。
当然，匹配结果由每个函数处理。
首先介绍每个参数的角色，并在详细介绍有关逻辑的更多信息。
此处的核心参数包括堆栈，索引，最后一个，LastTag。
他们贯穿整个匹配线，索引认为每个人都知道角色是什么。我们在这里分析了其他属性的范围。
首先看一个示例
如果按顺序识别此误解，则跨度标签将永远不会被终端函数处理，因为未识别封闭标签。因此，堆栈具有检查错误的功能。
识别启动标签时，堆栈的处理将被推入堆栈。闭合标签已识别，并将相应的封闭标签推出。
像上述情况一样，当它被识别时，我们会发现堆栈中的顶部是DIV，我们将一起处理这两个。这可以确保Astelement树的结构生成跨度。
请考虑一个问题，我们什么时候结束？
实际上，parsehtml函数不再起作用。换句话说，当索引没有改变并且HTML没有改变时，其余部分将用作文本处理。
这件作品的逻辑是：
感觉就像您意识到吗？事实证明，最后一步是判断中间处理部分是否由html移动。last是处理过程之前的样式，然后稍后进行比较。没有更改，只有文本。我们直接作为文本处理。
该标签中有许多位置，记录了先前的标签。由于某些特殊情况，需要判断最后的标签。例如，作为p标签，上一个标签是LastTag。如果其中有诸如DIV之类的标签，我们将遵循::
变得：
供参考，请参考此处。
大纲时：
作者将上述代码分为四个模块，我们一一分析。
文本为0时首先输入模块。
模块ONE的主要功能是匹配的：注释，条件绘制，DoctyPematch，endTagMatch，startTagMatch。它们的共同功能是，在匹配和处理后，要求提前功能进行前进。
不同之处在于，注释，endTagMatch和startTagMatch将分别输入options.com，options.end.end和options。启动函数。注释相对简单。如果您不在此处详细介绍，请让我们查看EndTagMatch和StartTagMatch。
我们说，在parsestarttag函数之前，除匹配外，所有属性都将通过属性规则性和匹配对象选择。格式如下：
然后将结果移交给HandlestartTag进行处理。之前还对HandlestartTag的功能进行了解释，主要是为了定期与内容匹配，并格式化：
会变成：
并将匹配结构推入堆栈，最后执行了options.start函数。
可以看出，它与EndTag匹配，EndTag主要进入ParseendTag函数。如前所述，ParseendTag函数主要是为了判断最终标签，然后堆叠到该位置，然后从选项中处理堆栈尾巴到标签上.end函数。
模块2主要是在符号之后检查代码，所有这些代码均分配给所有文本。换句话说，它不断检查特殊情况，例如endTag，starttagopen和评论。它可以部分分配给文本。文本将被视为模块三的文本信息。
第三模块是类文本信息。我们将通过options.chars功能对其进行处理。此功能将进一步确定是否有表达文本。
该模块已处理为脚本或样式标签。暂时我不会在这里详细介绍。请自己学习。
在说太多概念之后，您不禁要抽象，因此举一个具体的例子。
当我第一次进入时过程时，HTML是完整的代码：
首先通过parsestattag进行分析，获得的结果为：
当我们看到对每个属性的分析时，即attrs的对象将使用输入记录其余的HTML。
handlestarttag将重新处理上述attrs，并从数组更改为：
将相应的参数传递到选项。开始进行处理。此函数的参数大致如下：
然后，启动功能本身，转到创建一个震惊，然后处理v-for，v-if，v-once标签。这些标签的处理方法大致相同。从attrs中删除相应的属性，然后直接给予它以直接给出。播种创建一个新属性本身，处理后的格式如下：
猜猜第三次IFConditions会发生什么？
实际上，这是V-EESE的处理方法。
可以揭示神秘的面纱。关于v-if，v-ly-if不与父节点同时存在，但是只有一个孩子，即v-if，然后将其他孩子存储在ifconditions中。
那么它们看起来像源代码的特定过程？
那么，在V-For的结尾我们该怎么办？
如果我们的案子是这样的：
我们得到的结果将是：
这不涉及封闭式，并且直接在过程中味道。让我们详细看一下。
好的，结果出来了。
然后我们分析案件，并处理了开始标签，因此仍有
下一个呢？
是的？
抱歉，不是。，我们有理由相信这是一个文本节点，并将其交给模块的第三个节点。
显然，从0到位置的下一个标签之间有许多空间，我们将生成一个文本空节点。
然后，让我们省略中间的过程。
好吧，这是我们处理的第一个标签，让我们详细介绍一下。
我们仍然离开这里：
然后继续解释：
时间急忙，希望得到很多支持。