VUE虚拟DOM以及diff算法及key的好处

VDOM

虚拟DOM（Virtual DOM）就是常说的虚拟节点，它是通过JS的Object对象模拟DOM中的节点，然后通过特定的render方法将其渲染成真实的DOM的节点。

真实DOM的代码：

<div>
  <p>文本段</p>
</div>

VDOM的伪代码：

var Vnode = {
   
  tag: 'div',
  children: [{
   
    tag: 'p',
    text: '文本段'
  }]
}

为什么要引入虚拟DOM？
解决浏览器性能问题，减少重排，提高性能。

先了解一下浏览器渲染页面的流程。

浏览器渲染页面的流程

（1）HTML被HTML解析器解析成DOM Tree，CSS被CSS解析器解析成CSSOM Tree。（并行解析）
（2）DOM Tree和CSSOM Tree合并到一起，形成了render Tree（渲染树）。

重排：节点信息计算，即根据渲染树计算每个节点的几何信息（大小及位置）。
重绘：渲染绘制，即根据计算好的信息绘制整个页面，渲染出最终的页面。
前端性能优化——重排重绘.

总结： 每次真实 DOM 发生改变引起重排都会将上面的流程跑一遍，而重排过程特别是计算节点信息是非常消耗性能的，于是我们引入VDOM，在VDOM上进行的操作不会引起重排，然后再通过diff算法比较新VDOM（修改之后的）和旧 VDOM（修改前的）的不同从而去更新真实DOM（patch方法）。

注意： 特别要提一下 Vue 的 patch 是即时的，并不是打包所有修改最后一起操作DOM（React则是将更新放入队列后集中处理），这样岂不是相当于没有优化？实际上现代浏览器对这样的DOM操作做了优化，所以表现出来的结果是一样的，即减少的操作真实DOM的次数，达到减少重排，提高性能的目的。

VDOM操作

Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。
所以呢，VUE先在内存建一个虚拟DOM（Virtual DOM，简写VDOM），先把需要渲染的DOM元素放在这里，然后再放到浏览器上。
VDOM存放DOM元素是这样的，它将近似的元素进行复用，而不是重新创建一个元素，所以当浏览器需要用到两个近似的DOM元素时，其实用的是同一个DOM元素，只是有些属性值会进行对比修改。

看一个小案例：

<div id="app">
  <span v-if="isUser">