就目前我想到的 就只有两种：

1. document.fragment
   2.template模板

虚拟DOM本身是一个JavaScript对象模拟真实DOM ，用对象的属性去描述一个DOM节点，最终也只是一个真实DOM的映射

createElement,render

虚拟Dom在vue底层实现中是一个类，每次_render的时候都会实例化Vnode为一个虚拟dom对象。也就是说本质上是用一个js对象来描述dom节点。

可以使用 document.createDocumentFragment 创建虚拟节点

定义虚拟dom的数据结构

虚拟DOM可以用一个JavaScript对象来表示，通常包含标签名、属性、子节点等信息。

{
  tag: 'div',
  attrs: { class: 'container' },
  children: [
    {
      tag: 'p',
      attrs: { id: 'paragraph' },
      children: ['Hello, world!']
    }
  ]
}

编写虚拟dom的创建和更新逻辑

可以编写函数或类来创建和更新虚拟DOM节点。
创建节点时，根据传入的标签名、属性和子节点信息，构建对应的虚拟DOM对象。
更新节点时，比较新旧虚拟DOM对象的差异，确定需要进行的DOM操作，如添加、修改或删除节点。
根据差异来更新真实DOM，使其与最新的虚拟DOM保持同步。

实现虚拟dom的渲染和挂载

虚拟DOM的渲染可以通过递归遍历虚拟DOM树来实现。
根据虚拟DOM节点的信息，创建对应的真实DOM节点，并设置相应的属性和内容。
将创建的真实DOM节点添加到父节点中，形成DOM树结构。

处理虚拟dom的更新和事件处理

当虚拟DOM发生变化时，可以通过比较新旧虚拟DOM对象，找出需要更新的节点，只对这些节点进行DOM操作，从而提高性能。
可以添加事件处理逻辑，监听虚拟DOM节点的事件，并执行相应的操作。