什么是虚拟DOM
虚拟DOM其实是时代发展的产物。在web早期，网页通常没有现在这么多交互及动画效果，所以没有很多复杂的状态需要管理，使用jquery操作DOM即可满足开发需求。随着时代的发展，页面功能越多，需求也越来越复杂，程序维护的状态也越来越多，所以需要的DOM的操作也就变得频繁起来，而直接操作DOM的代价又是相当高的（性能浪费），所以虚拟DOM的技术就应运而生了。
虚拟DOM的解决方式是通过页面状态生成一个虚拟节点树，然后使用虚拟节点树进行渲染。在渲染之前，会使用新生成的虚拟节点树和上一次生成的虚拟节点树进行对比，然后只渲染不同的部分。
状态发生变化时重新渲染
虚拟节点树其实是由组件树建立起来的整个虚拟节点（Virtual Node，简称VNode）
vue中的虚拟DOM
在vue中，使用模板来描述状态和DOM之间的映射关系。vue通过编译将模板转为渲染函数（render），执行渲染函数就可以得到一个虚拟节点树，使用这个虚拟节点树就可以渲染页面。
模板转换成视图的过程
虚拟DOM的最终目标是虚拟节点渲染到视图上，但是如果直接用虚拟DOM覆盖旧节点的话，会有很多不必要的DOM操作。例如，一个ul标签下其中只有一个li标签有变化，这种情况如果使用新的ul去替换旧的ul，其实除了那个发生变化的li节点外，其他都不需要重新渲染。所以虚拟DOM在虚拟节点映射到视图的过程中，将虚拟节点与上一次渲染视图所有使用的旧虚拟节点做对比，找出真正需要更新的节点后才进行DOM操作。
虚拟DOM的执行流程
从上可以看出，vue中的虚拟DOM主要做了两件事：
- 提供与真实DOM节点所对应的虚拟节点vnode
- 将虚拟节点vnode和旧虚拟节点进行对比，然后更新视图。
vnode是JavaScript中一个很普通的对象，这个对象属性上保存了生成DOM节点所需要的一些数据，这个将在下一篇文章解释。
