【JavaScript】虚拟 DOM

虚拟 DOM 是⼀层对真实DOM的抽象，以JavaScript 对象 (VNode 节点) 作为基础的树，⽤对象的属性来描述节点，最终可以通过⼀系列操作使这棵树映射到真实环境上。

虚拟DOM 表现为⼀个 Object对象。并且最少包含标签名 (tag)、属性
(attrs) 和⼦元素对象 (children) 三个属性。

使⽤虚拟 DOM 可以提⾼性能，但并不是⼀定更快。虚拟 DOM 需要进⾏额外的计算和⽐较操作，⽽这些操作也会消耗⼀定的时间和性能。因此，虚拟 DOM 适⽤于⼤规模、⾼度动态的⻚⾯，⽽在简单的静态⻚⾯中使⽤虚拟 DOM 并不能提⾼性能。

虚拟DOM算法操作真实DOM，性能⾼于直接操作DOM，直接操作DOM还会引用回流或者重绘，虚拟DOM和虚拟DOM算法是两种概念。虚拟DOM算法 = 虚拟DOM + Diff算法。

<ul id="list">
  <li class="item">哈哈</li>
  <li class="item">嘿嘿</li>
  <li class="item">呵呵</li>
</ul>

 let oldVDOM = {
   // 旧虚拟DOM
   tagName: "ul", // 标签名
   props: {
     // 标签属性
     id: "list",
   },
   children: [
     // 标签⼦节点
     {
       tagName: "li",
       props: { class: "item" },
       children: ["哈哈"],
     },
     {
       tagName: "li",
       props: { class: "item" },
       children: ["嘿嘿"],
     },
     {
       tagName: "li",
       props: { class: "item" },
       children: ["呵呵"],
     },
   ],
 };