什么是虚拟 DOM？它的作用是什么？

Question

希望简单了解虚拟 DOM，它的作用是什么？

Answer 1

虚拟DOM本质上是JavaScript对象，真实DOM的轻量级表示。它的主要作用有：

1. 提升性能 - 通过批量计算DOM变化，减少实际DOM操作
2. 简化开发 - 让开发者专注于描述UI状态，而非手动操作DOM
3. 实现跨平台 - 同一套逻辑可用于Web、移动应用和服务器渲染

虚拟DOM工作流程就是创建虚拟树、比较新旧差异、只更新变化部分到真实DOM。牺牲了一点内存，但大大提高了开发效率和应用性能。

Answer 2

虚拟 DOM 是 React 中的一种技术，用于提高 DOM 操作的性能。

口语化解释：虚拟 DOM 是一个轻量级的 JavaScript 对象，它是对真实 DOM 的抽象。当状态变化时，React 会先更新虚拟 DOM，然后通过对比新旧虚拟 DOM 的差异，只更新真实 DOM 中需要变化的部分，从而减少直接操作 DOM 的开销。

Answer 3

简单来讲，虚拟dom是通过命令式和声明式来渲染来渲染页面的方式，你可以对比以下innerHtml和虚拟dom。

• innerHtml是基于给定的模板字符串替换页面的真实dom，先把字符串解析成dom元素再渲染或替换掉页面的真实dom。
• 虚拟dom则分为两步：第一步创建 JavaScript 对象，这个对象可以理解为真实 dom 的描述；第二步是递归地遍历虚拟 dom 树并创建真实 dom。

如果涉及到批量dom更新和频繁的dom更新，虚拟dom的性能会显著由于innerHtml。遇到新dom更新时，innerHTML会把之前渲染过的dom全部销毁然后再创建，这种属于大开大合的性能消耗。
而虚拟dom则会通过diff算法，比对新旧dom的不同处并只更新不同节点。

我来简单给你展示以下虚拟dom长什么样子：

const obj = {
    tag: 'div',
    children: [
        { tag: 'span', children: 'hello world' }
    ]
}

上述的代码就是一组虚拟dom的描述，div标签嵌套了span标签，span标签内部就是'hello world'字符串，然后通过Render生成真实dom渲染到页面

function Render(obj, root) {
    const el = document.createElement(obj.tag)
    if (typeof obj.children === 'string') {
        const text = document.createTextNode(obj.children)
        el.appendChild(text)
    } else if (obj.children) {
        // 数组，递归调用 Render，使用 el 作为 root 参数
        obj.children.forEach((child) => Render(child, el))
    }

    // 将元素添加到 root
    root.appendChild(el)
}

你日常开发过程中写的template模板代码vue也会提供一个编译函数给你，通过编译函数解析模板代码，然后生成真实dom
当然，真实的虚拟dom肯定比这个复杂得多，可能会有监听器、依赖收集器，编译器等等