每个人都熟悉这个，调用渲染将获得模板（文件）中介绍的虚拟DOM，那么此渲染来自哪里？如何将文件转换为可识别的代码？
渲染函数如何以两种方式来自？
本文将介绍这两种类型以及详细的汇编过程原理
我们知道这是一个模板，而不是真实的HTML，并且浏览器不知道模板，因此我们需要将其编译为本机HTML，浏览器知道
该块的主要过程是
上面的第1、2和3条是模板编译的过程
那么它如何编译并最终生成渲染函数呢？
这是模板汇编的输入函数。它接收两个参数
有三个主要步骤来编译该过程：
这三个步骤对应于三个函数，这将逐一引入。
源代码地址：
只有几行代码，三个步骤，调用三种方法非常清楚
让我们看一下最后一个回报的内容，然后深入到这三个步骤中分别调用源代码。
例如，有这样的模板
打印汇编结果，即，源代码返回的结果，查看它是什么
我不明白，没关系。请注意上面提到的三个步骤。
有一般的印象，然后查看源代码
源代码地址：
此方法是解析器的主要函数，也就是说，它必须通过常规方法提取模板字符串中的所有信息，并生成AST对象的相应结构
接收两个参数
核心步骤是：
调用功能分析模板字符串
每个分析的结果合并到一个对象（即最后的AST）
这个地方的源代码确实太长了。有了数百行代码，我只是将其发布。如果你感兴趣
分析上面的文本时，将根据不同类型的节点标记呼叫以标记节点类型。标记下一步时将使用此属性
1个元素节点2包含一个动态文本节点，其中带有变量3的动态文本节点，而没有可变的纯文本节点。此功能是在其中找到静态节点和静态根节点，然后添加标记。
该函数中调用的外部函数不会发布代码。一般过程就是这样
源代码地址：
这是生成渲染的功能，这意味着它最终将返回以下内容
这个结构有点熟悉吗？
要了解虚拟DOM，您可以看到上面的渲染是虚拟DOM的结构，即将标签划分为...
在查看源代码之前，我们必须首先了解上面返回的最后一个字段的含义。如果您查看源代码，它将容易得多，否则该功能的功能返回了什么？羊毛布
渲染，让我们翻译上面的汇编
这是在“您不知道的JavaScript”卷中引入的，是用于欺骗短语范围的关键字，它使我们能够更快地引用一个对象上的多个属性
见一个示例
以上是当前的组件实例。由于短语字段中属性的方向已更改，它直接在标签中使用，而不是这样
那么，这是什么？
这是在源代码中定义的，格式为：（缩写）=（函数名称）
源代码地址：
看一下，清楚吗？
接下来，让我们看一下源代码
生成源代码地址：
这个过程非常简单。只有几行代码。是要判断它是否首先是空。如果您不空，请基于AST创建VNODE，否则您将创建一个空的Div Vnode
可以看出，这主要是由方法创建的，所以让我们看一下其源代码，看看它如何创建
genelement（）源代码地址：
这里的逻辑仍然很清楚，即，传递的AST元素节点的一堆属性以执行不同的生成函数
在这里，您还可以发现另一个知识点V-For的优先级高于V-IF，因为它首先是为此判断的
每种呼叫类型的生成函数将不会一一列出。通常，创建了三种类型的Vnode节点类型。
让我们首先举一个例子，这三个情况如下
上述三种类型，最后一个渲染完全相同，因为这是上面的模板后的一个渲染
目前，有人可能会问，我为什么要自己写，没有模板汇编自动生成？
这个问题很好！通过自己写作必须很好
例如，组件源代码直接用大量渲染函数编写
接下来，看看这两个点是如何反映的
首先查看官方网站的生命周期，内容涉及模板汇编的一部分
如图所示，如果有的话，它将不在乎，因此模板高于优先级，例如
那渲染自己呢？
此代码仅在执行后渲染
您可以获得更高的渲染功能的优先级
因为无论是安装还是最终都将其编译成函数，如果已经有一个函数，您都会跳过上一个编译
这也反映在源代码中
在源代码中找到答案：
例如，我们需要写很多判断
我不知道您是否像上面一样编写了代码？
让我们更改一种编写与上面相同代码的方法，然后直接编写渲染
明白了！就是这样吗？
是的，就是这样！
或以下内容，多次致电时非常方便
如果您想知道以更多格式编译的模板，可以做到这一点
可以安装VUE2的模板编译
VUE3的模板汇编可以单击此处
然后自己测试
另外，VUE3中模板的编译部分中有一些修改。您可以单击下面的链接以查看虚拟DOM和DIFF算法。