一、什么是虚拟DOM

虚拟DOM（Virtual DOM）是浏览器中真实DOM（Document Object Model）的一个轻量级副本，它以JavaScript对象的形式存在于内存中。与传统的DOM直接操作页面元素不同，虚拟DOM的核心目的是优化页面渲染效率。每当数据发生变化时，Vue首先会在内存中更新虚拟DOM，并与上次的虚拟DOM进行比较，计算出差异。然后，Vue会将这些差异应用到真实DOM中，进行最小化的更新，从而避免了不必要的DOM操作，提升了应用的性能。

在js对象中，虚拟dom表现为一个obj对象，并且最少包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，不同框架对这三个属性的命名可能会有差别。

定义真实dom

<div id="app">用户：张三</div>

而在Vue.js中，虚拟dom可能表示为：

{ type: 'div', props: { id: 'app' }, children: [ { type: 'text', text: '用户：张三' } ] }

二、为什么需要虚拟dom

真实的dom是非常复杂的，操作它是非常慢的，其元素非常庞大，页面的性能问题，大部分都是由DOM操作引起的

真实的DOM节点，哪怕一个最简单的div也包含着很多属性，可以打印出来直观感受一下：

所以，我们直接去操作dom的代价是非常大的，频繁操作还会导致页面卡顿，影响用户体验。

（1）保证性能下限，在不进行手动优化的情况下，提供过得去的性能

看一下页面渲染的流程：解析HTML -> 生成DOM -> 生成 CSSOM -> Layout -> Paint -> Compiler

下面对比一下修改DOM时真实DOM操作和Virtual DOM的过程，来看一下它们重排重绘的性能消耗∶

• 真实DOM∶ 生成HTML字符串＋重建所有的DOM元素

• 虚拟DOM∶ 生成vNode+ DOMDiff＋必要的dom更新

Virtual DOM的更新DOM的准备工作耗费更多的时间，也就是JS层面，相比于更多的DOM操作它的消费是极其便宜的。尤雨溪在社区论坛中说道∶ 框架给你的保证是，你不需要手动优化的情况下，依然可以给你提供过得去的性能。

（2）跨平台

Virtual DOM本质上是JavaScript的对象，它可以很方便的跨平台操作，比如服务端渲染、uniapp等。 真实DOM与虚拟DOM的对比

为了更清楚地理解虚拟DOM的优势，我们可以通过一个简单的示例对比真实DOM和虚拟DOM在更新过程中的表现。

假设有一个简单的HTML页面，包含一个显示用户信息的div，并且我们需要更新这个div中的内容：

真实DOM操作

<div id="app">用户：张三</div>

假设我们需要更新用户名，将“张三”修改为“李四”。在真实DOM中，Vue会直接操作浏览器的DOM，步骤如下：

1. 查找并更新元素：Vue会查找页面中id为app的div元素，并更新它的内容。
2. 重新渲染：修改后的DOM会直接反映在页面上。

虽然这种操作可以完成更新，但每当数据变更时，Vue都会进行DOM的查找和更新，这对于页面中大量的DOM元素来说，可能会导致性能问题，尤其是在复杂的应用中。

虚拟DOM操作

在使用虚拟DOM的情况下，Vue首先会更新虚拟DOM中的内容，而不直接操作真实DOM：

1. 虚拟DOM更新：Vue会在内存中创建一个虚拟DOM，表示用户信息的div。在虚拟DOM中，children中的text被从“张三”更新为“李四”。

{ type: 'div', props: { id: 'app' }, children: [ { type: 'text', text: '用户：李四' } ] }

2.比较差异：Vue会将新的虚拟DOM与上一次的虚拟DOM进行比较，找出其中的差异。

{ type: 'div', props: { id: 'app' }, children: [ { type: 'text', text: '用户：张三' } ] }

3.最小化更新：通过差异化更新算法（diff算法），Vue检测到children中的text部分发生了变化，只需要将这一小部分更新到真实DOM中。

4.真实DOM更新：最终，Vue只会在真实DOM中更新div中的内容，避免了不必要的DOM操作。

对比

从上面的对比可以看出，虚拟DOM通过减少直接对DOM的操作和更新，只修改页面中实际改变的部分，显著提高了渲染效率，尤其在处理大规模更新时，能够大幅度提升性能。

原文：https://juejin.cn/post/7437461593178341413