Vue中的虚拟DOM

vue框架还有一个强大的功能，就是提供了一个虚拟DOM树的概念，虚拟的DOM的核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。

如何理解这就话，我的理解是：在页面渲染之前，先在内存里面生成一个DOM树（可以理解电脑先在脑海里构建了一个DOM结构），假设它为DOM树1，然后再渲染到页面上生成一个存在的DOM结构。在我们通过vue进行一些DOM操作的时候，比如在一个div里面添加一个p标签，电脑会在内存中又虚拟出一个DOM树，假设为DOM树2，然后电脑会将DOM树1和DOM树2进行比较，通过DIFF算法，发现只多了一个p标签，那么其他的结构不会改变，唯独将添加的这个p标签再进行渲染一次。这样，就不用所有的DOM结构再重新的渲染一次，从而提高性能。

下面我们通过一个图来理解：

虚拟DOM的diff算法

虚拟DOM中，在DOM的状态发生变化时，虚拟DOM会进行Diff运算，来更新只需要被替换的DOM，而不是全部重绘。在Diff算法中，只平层的比较前后两棵DOM树的节点，没有进行深度的遍历。

算法规则：
1.如果一个节点类型改变，会把旧节点卸载，安装新节点，旧节点下面的所有子节点都将被卸载。
2.节点类型不变，属性或者属性值改变，不会卸载节点，执行节点更新的操作。
3.文本改变，直接修改文字内容。
4.移动，增加，删除子节点时：
如果想在中间插入节点F，简单粗暴的做法是：卸载C，装载F，卸载D，装载C，卸载E，装载D，装载E。如下图：
如果为元素增加key后，Vue就能根据key，直接找到具体的位置进行操作，效率比较高。如下图：
所以，一般情况下，我们都会给元素添加key值来保证其映射关系。
参考：
vue.js官方文档
https://blog.****.net/weixin_42695446/article/details/84680213