携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情
在 HTML DOM 中认为所有事物都是节点，当数据改变时，通过查找DOM元素，再进行修改DOM后来实现页面的更新。虚拟DOM这个概念最先使用在React中，Vue从2.0版本开始引入了虚拟DOM（Virtual DOM）。
真实DOM 与 虚拟DOM
虚拟DOM与真实DOM是两种相对的概念，它不是真实DOM，而是使用javascript的对象来对真实dom的一个模拟，它和真实的DOM同步，真实DOM的每次在更新时（增删改）都需要遍历整个DOM树，而虚拟DOM相较于真实DOM来说：
- 不会进行重绘与重排操作（样式计算、布局、绘制、栅格化等等），比对真实DOM中对整个DOM树的查询，所消耗的性能要少
- 与真实DOM进行差异比较，可以只渲染局部
- 收集变化，再将页面改变的内容映射到虚拟DOM中
- 具备跨平台优势（不依赖真实环境，而是js对象）
传统形式：
使用虚拟DOM后：
那么问题来了，虚拟DOM是如何挂载到真实DOM上的呢？
虚拟DOM的结构
从结构上来说，虚拟DOM是一个js对象，包含以下三个属性：
tag// 标签props// id、class等children// 子节点
比如下面一段HTML代码
<div id="app">
<h1 class="title">俺是一个标题</h1>
</div>
进行转化后，变成由以上三个属性组成的对象,这就是一个虚拟的DOM树：
{
tag: 'div',
props: {
id: 'app'
},
chidren: [
{
tag: 'h1',
props: {
className: 'title'
},
chidren: [
'俺是一个标题'
]
}
]
}
在官网中描述中，对应的 DOM 节点树如下图：
虚拟DOM树由无数个虚拟节点组成（也就是VNode），上图可以直观的看出，元素、文字、注释等等都是一个VNode
更新真实DOM
虚拟DOM来更新真实DOM，需要使用到diff算法
