对虚拟 DOM 的理解？虚拟 DOM 主要做了什么？虚拟 DOM 本身是什么？

[lgwebdream]

[lgwebdream]

扫描下方二维码，获取答案以及详细解析，同时可解锁800+道前端面试题。

[TANGYC-CS]

虚拟 DOM(Virtual DOM)是一种编程概念，它用 JavaScript 对象（在 Vue.js 的上下文中，这些对象具体表现为 VNode，即虚拟节点）来表示真实的 DOM 结构。 每个 VNode 对象至少包含标签名（type）、属性（attrs）和子元素对象（children）等属性。这些属性共同描述了 DOM 节点的结构和内容。 这种表示法使得前端开发者能够以一种更加声明式的方式来描述和更新页面。

虚拟 DOM 主要作用有以下几点：

1. 性能优化：虚拟 DOM 通过比较新旧两个虚拟 DOM 树，计算出最小的变更集，然后只将这些变更应用到实际的 DOM 上。 这样可以显著减少直接操作真实 DOM 的次数，从而提高性能。 因为直操作真实 DOM 是一项昂贵的操作，会导致浏览器执行大量的重排和重绘操作。
2. 简化操作：虚拟 DOM 提供了一种更加抽象和简化的方式来操作 DOM。开发者不需要直接操作复杂的 DOM API，而是通过操作虚拟 DOM 来间接的修改页面
3. 跨平台渲染：虚拟 DOM 使得前端框架（如 Vue.js）能够更容易地实现跨平台渲染。 因为虚拟 DOM 是对真实 DOM 的一种抽象表示，所以可以被映射到不同的渲染目标上，例如浏览器、服务端渲染、移动应用等。