Vue中的虚拟DOM树与diff算法

一、Vue中的虚拟DOM树
首先为什么使用虚拟DOM树，这是因为不用频繁的去操作真实DOM ，这样会很大的提升性能。以下举个操作真实DOM的例子：

在控制台可以看到循环消耗的时间:

如果减少对真实DOM的操作次数，可以提高性能。

控制台显示效果：

由此可以看到，减少对真实DOM的操作可以提高性能。而Vue正是在内存当中生成一个虚拟DOM树，减少了对真实DOM的操作，而虚拟DOM树其实就是JS里面的普通对象。
Vue在渲染页面时会生成一个虚拟DOM树，当页面改变时会再生成一个虚拟DOM树，并与之前的虚拟DOM树进行比较，Vue通过diff算法，来记录差异的地方。得到需要更新的地方，更新内容。
二、diff算法
虚拟DOM中，在DOM的状态发生变化时，虚拟DOM会进行Diff运算，来更新只需要被替换的DOM，而不是全部重绘。
在Diff算法中，只平层的比较前后两棵DOM树的节点，没有进行深度的遍历。
1.如果节点类型改变，直接将旧节点卸载，替换为新节点，旧节点包括下面的子节点都将被卸载，如果新节点和旧节点仅仅是类型不同，但下面的所有子节点都一样时，这样做也是效率不高的一个地方。
2.节点类型不变，属性或者属性值改变，不会卸载节点，执行节点更新的操作。
3.文本改变，直接修改文字内容
如果想在中间插入节点F，简单粗暴的做法是：卸载C，装载F，卸载D，装载C，卸载E，装载D，装载E。如下图：

写代码时，如果没有给数组或枚举类型定义一个key，就会采用上面的粗暴算法。
如果为元素增加key后，Vue就能根据key，直接找到具体的位置进行操作，效率比较高。如下图：