当前位置: 首页 > 网络应用技术

Xiaobai还可以理解VUE3源代码的渲染系统

时间:2023-03-06 12:26:22 网络应用技术

  今天,让我们模拟VUE3渲染系统的实现。如果您对此不太了解,可以仔细看一下。我希望这对每个人都有帮助。

  众所周知,VUE框架是通过渲染函数解析TMPlete模板,以将H函数解析为VNode(虚拟节点)并慢慢地转换为真实元素。TODADY我们将手动实现一个简单的渲染器来探索其真实原理。

  手写的虚拟节点可以帮助我们实验

  我们现在要做的是将虚拟节点中的内容转换为真实元素

  通过参数

  本质上,现在考虑将对象中的封面对象的数据结构转换为真实的DOM,然后将其安装。接下来,我们将生成的族载到特定的容器

  传输参数Vnode虚拟节点容器安装在容器上

  这种认识有点复杂。主要原因是需要考虑更多情况,而且这里没有完整的写作。这就是主要步骤实施方式。

  执行安装函数后,该页面可以真正显示我们的DOM元素,如下所示:

  但是,当我们更新DOM时,它如何时间更新?

  成功更换效果显示

  我们已经更改了类类的类名称以增加名称属性删除ID属性补丁处理

  可以实现效果的成功性能,删除,删除和修改,也可以实现点击,并且可以触发功能。

  这里可能有一个仔细的同学,以下子元素并不怀疑。那是因为我们尚未与孩子打交道,所以它肯定不会改变以上。然后为什么要在不同的标签中更改第一个案例?不用说,尽管它没有进行道具的孩子的处理,但这很简单。

  我们在此处添加了两个H标签修补程序,以在此处处理几个情况。

  这样,我们封装了一个完整的渲染系统,并了解实施过程可以更好地帮助我们了解Vue的内部渲染系统如何实现。