虚拟DOM的概念和原理

概念

在vue、react出来之前，都是直接操作DOM，这样会引起重排和重绘。虚拟DOM是简称就是DOM对象，在每次更改的时候，对比新旧DOM对象的差异，然后一次更改，减少了重排和重绘，所以节约了性能。

组成

虚拟dom对象的基本组成是一颗树形结构，主要属性有type、props、children，分别为类型，数据，孩子节点。

diff算法

diff算法是使用虚拟dom节约性能最关键的，它主要的思路是，首先我们将新旧节点当作两个数组，然后有四个分别指向其首尾节点的指针，接着进行比较：
头头对比：对比两个数组的头部，如果相同，就把新节点patch到旧节点，首指针加一
尾尾对比：对比两个数组的尾部，如果相同，就把新节点patch到旧节点，尾指针减一
旧尾新头：交叉对比，旧尾新头,如果找到，把新节点patch到旧节点，旧尾指针前移，新头指针后移
旧头新尾：交叉对比，旧头新尾，如果找到，就把新节点patch到旧节点，新尾指针迁移，旧头指针后移
利用key对比：如果上面的都没有找到，就用新指针对应节点的key去旧数组寻找对应的节点，这里分三种：当没有对应的key，那么创建新的节点，如果有key但是不是相同的节点，创建新节点，如果有key并且相同，就把新节点patch到旧节点。
然后对于特殊情况，如果在旧数组遍历完了后，新数组中还有值，则添加新数组中漏掉的节点。
如果新数组遍历完了，旧数组中还有漏掉的值，就直接删除漏掉的值。

参考文章