【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 = {// 旧虚拟DOMtagName: "ul", // 标签名props: {// 标签属性id: "list",},children: [// 标签⼦节点{tagName: "li",props: { class: "item" },children: ["哈哈"],},{tagName: "li",props: { class: "item" },children: ["嘿嘿"],},{tagName: "li",props: { class: "item" },children: ["呵呵"],},],};