前面是官方解释
官网概念：Vue通过建立一个虚拟DOM树对真实DOM发生的变化保持追踪。
一棵真实DOM树的渲染需要先解析CSS样式和DOM树，然后将其整合成一棵渲染树，再通过布局算法去计算每个节点在浏览器中的位置，最终输出到显示器上，这些步骤在浏览器的渲染过程及页面加载的优化方案一文中有详细的说明。
而虚拟DOM则可以理解为保存了一棵DOM树被渲染之前所包含的所有信息，而这些信息可以通过对象的形式一直保存在内存中，并通过JavaScript的操作进行维护。
什么是虚拟 dom
虚拟DOM是对应于浏览器渲染的真实DOM的；在react/vue 等技术出现之前，我们要改变页面展示的内容只能通过变量查询DOM树来找到对应的DOM节点，修改节点样式、行为或者结果，来达到更新ui的目的；
这种方式是很消耗计算资源的，因为每次找到DOM节点都要遍历DOM树；如果我们建立与DOM节点对应的DOM对象（JS对象），以对象嵌套的方式来表示 DOM 树，那么每次 dom 的更改就变成了JS 对象的属性的更改，这样一来就能查找 JS对象的属性变化要比查询 DOM 树的性能开销小
为什么DOM树的性能开销大
其实也并不是查询DOM树节点的开销大，而是（1）DOM树的实现模块和JS模块是分开的，这些跨模块通讯增加了成本，以及（2）DOM操作引起的浏览器回流和重绘，使得性能开销巨大。原本再PC端是没有问题的，PC的计算能力强，但是现在随着移动端的发展，好多的网页要在手机上运行，而手机的性能参差不齐，有时会有性能问题。
新技术是如何解决性能问题的
angular/react/vue等框架出现就是为了解决这个问题。
他们的思想是每次更新DOM都尽量不要去刷新整个页面，而是有针对性的去刷新被更改的那部分，来释放掉被无效渲染占用的CPU，GPU的性能。
angular
angular 采用的机制是脏值检测机制，所有使用了ng的指令的scope data 和 {
{}}语法的scope data都会被加入脏检测的队列。
vue
vue 采用的是虚拟DOM重写setter，getter实现观察者监听data属性变化生成新的虚拟DOM，通过h 函数创建真实的DOM替换掉DOM树上对应的旧DOM；
1.页面渲染的时候创建一颗虚拟DOM树，
2.页面发生改变的时候再创建一颗虚拟DOM树
3.前后两颗新旧虚拟DOM树进行对比，Vue通过diff算法，去记录差异的地方；
4.将有差异的地方更新到真实的DOM树中。
如何提高性能
vue中的虚拟DOM树只会重新渲染页面修改的地方，大大减少了对真实DOM树的操作。 -------虚拟DOM树是占内容的，但是可以帮我们提高DOM的性能。
可以这样理解，虚拟DOM树是用空间(虚拟DOM树占空间)换时间(虚拟DOM树可以提高DOM效率)。
Vue v-for 中 :key 到底有什么用？
vue不直接操作真实的DOM树，通过虚拟DOM树就可以重新渲染修改的地方，隐藏在背后的原理其实就是 diff 算法。 key的作用是为了高效的更新虚拟DOM树，提高查找的效率，一次性定位到要修改的元素
react
react 也是通过虚拟DOM 和setState 更改data生成新的虚拟DOM以及diff算法来计算和生成需要替换的DOM 做到局部更新。