虚拟 DOM

⭐️ 为什么需要虚拟 DOM

目的：为了解决频繁操作 DOM 导致性能开销大的问题

方案：JS 运算效率 远高于 操作 DOM 效率，所以把真实 DOM 树抽象成 JS 对象树，运用 patch 算法 来用JS计算出真正需要更新的节点，最大限度地减少 DOM 操作，从而显著提高性能

1. Vue/React 等框架都是数据驱动页面更新，让用户无需自己操作 DOM
2. 由于操作 DOM 这个行为本身开销成本大，而数据的频繁更新会导致 DOM 也得频繁操作
3. 所以框架本身就得想出一个解决方案，能够尽可能减少 DOM 操作
4. 而执行 JS 的效率远高于操作真实 DOM，所以想到用 JavaScript对象树 来模拟 真实DOM树，这样一来，不直接操作 DOM ，而是操作 JS 数据。性能就能提高许多
5. 再通过 diff 算法，把最终更新时需要操作的部分计算好，最后一次性操作 DOM
6. 从而达到减少 DOM 操作，提升性能的目的

⭐️ 什么是虚拟 DOM

Virtual DOM 其实就是一棵以 JavaScript 对象（vNode节点）作为基础的树，用对象属性来描述节点，实际

是一层对真实 DOM 的抽象。

基本成员：

• tag （标签名）
• props （属性）
• children （子元素对象集合）

例如：

<div id="app" class="container">
  <h1>虚拟DOM</h1>
  <ul style="color: orange">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
  </ul>
</div>

虚拟DOM表示：