操作真实DOM效率十分低下且影响性能，如果有十次DOM操作，则需要操作十次DOM
如果使用虚拟DOM的话，不会立即操作DOM，而是把变更存在虚拟DOM中，它是一个JS对象，当操作完了以后，虚拟DOM会再和真实DOM
进行对比，再更新DOM这样只会有一次DOM操作
虚拟DOM的高效得益于其高效率的diff算法，diff算法有如下特点
1，只会对比同层的节点，如果节点类型相同则对比其子节点，当节点类型相同而属性发生了变化时会为真实DOM重新赋值，这个操作叫做PROPS,如果其文本发生变化，则
为其文本重新赋值，这个过程叫做TEXT，当节点类型已经发生改变时，就不会对比子节点了，而是直接干掉原有的节点，并插入新节点，这个过程叫做REPLACE
2，为什么要在许多MVVM框架中如Vue，React循环中加key值，原因也是因为diff算法，因为diff算法只会对比同层的节点，举个栗子，如下图，在循环中插入一个F节点
则diff算法会解析成
此时，新插进来的F节点会映射到相同层级的C节点，且影响到了后面节点的排序，这时diff算法就要从c节点开始往后不停地更新，直到虚拟DOM和真实dom相同，这样的做法十分浪费性能和效率，本来一次对比操作的事愣是做了四次，因此，这就是为什么虚拟DOM结构的MVVM框架一定要在for循环中加key值的意义了
原文：https://www.cnblogs.com/siminshare/p/10999919.html