1、为什么需要虚拟DOM
前面我们从OA系统信用盘新增三个极速Q3266397597【dashengba.com】零开始写了一个简单的类Vue框架，其中的模板解析和渲染是通过Compile函数来完成的，采用了文档碎片代替了直接对页面中DOM元素的操作，在完成数据的更改后通过appendChild函数将真实的DOM插入到页面。
虽然采用的是文档碎片，但是操作的还是真实的DOM。
而我们知道操作DOM的代价是昂贵的，所以vue2.0采用了虚拟DOM来代替对真实DOM的操作，最后通过某种机制来完成对真实DOM的更新，渲染视图。
所谓的虚拟DOM，其实就是用JS来模拟DOM结构，把DOM的变化操作放在JS层来做，尽量减少对DOM的操作（个人认为主要是因为操作JS比操作DOM快了不知道多少倍，JS运行效率高）。然后对比前后两次的虚拟DOM的变化，只重新渲染变化了的部分，而没有变化的部分则不会重新渲染。
比如我们有如下的DOM结构。
<ul id="list">
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
</ul>
我们完全可以用JS对象模拟上面的DOM结构，模拟后就会变成下面的这种结构。
复制代码
var vdom = {
tag: 'ul',
attr: {
id: 'list',
},
children: [
{
tag: 'li',
attrs: {
className: 'item',
children: ['Item 1']
},
},
{
tag: 'li',
attrs: {
className: 'item',
children: ['Item 2']
}
}
]
}
复制代码
必须要注意一点的是：JS模拟的DOM结构并没有模拟所有DOM节点上的属性、方法（因为DOM节点本身的属性非常多，这也是DOM操作耗性能的一个点），而是只模拟了一部分和数据操作相关的属性和方法。
2、怎么使用虚拟DOM
Vue在2.0版本引入了vdom。其vdom是基于snabbdom库所做的修改。snabbdom是一个开源的vdom库。
snabbdom的主要作用就是将传入的JS模拟的DOM结构转换成虚拟的DOM节点。
先通过其中的h函数将JS模拟的DOM结构转换成虚拟DOM之后，再通过其中的patch函数将虚拟DOM转换成真实的DOM渲染到页面中。
为了保证页面的最小化渲染，snabbdom引入了Diff算法，通过Diff算法找出前后两个虚拟DOM之间的差异，只更新改变了的DOM节点，而不重新渲染为改变的DOM节点。
在这里我不打算分析snabbdom的源码来解释到底snabbdom是怎么干成这件事的（主要是现阶段没到那个水平，哈哈。再者已经有很多同学做过类似的分析，相关链接附在文章末尾）。
我会从snabbdom的使用角度来看Vue中的虚拟DOM是如何完成视图渲染的。
我们先看一下snabbdom中两个核心API的功能。
h()函数：将传入的JS模拟的DOM结构模板转换成vnode。（vnode是一个纯JS对象）
patch()函数：将虚拟的DOM节点渲染到页面中。
我们提供一个实例来看一下snabbdom的实际作用。
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="container"></div>
<button id="btn-change">change</button>