Vue中虚拟DOM的Diff算法简析与key值的作用

我们在使用vue的过程中，知道vue为了提高网站的整体性能使用的是虚拟dom的方法那我们一步步来分析

什么是虚拟dom：

虚拟 DOM 就是为优化浏览器性能问题。在网页中若一次操作中有 10 次更新 DOM 的动作：
真实DOM会每更新一次就操作一次dom，浏览器会接连更新10次，以最后一次去覆盖之前的渲染。
**虚拟 DOM **不会立即操作 DOM，而是将这 10 次更新的内容保存到本地一个 JS 对象中，最终将这个 JS 对象一次性渲染到 DOM 树上，再进行后续操作，省去了大量没有意义的计算量。
那么虚拟DOM的优势已经十分明显了，操作内存中的 JS 对象的速度显然要更快，等更新完成后，再将最终的 JS 对象映射成真实的 DOM，交由浏览器去绘制。从而使网页有一个更好的优化。

Diff算法就是vue实现每一次更新如何找出上一次与这次变化的地方，实现前后两课DOM树的差异比较。

DOM 只会对同一个层级的元素进行对比，如下图所示， div 只会和同一层级的 div 对比，第二层级的只会跟第二层级对比，

diff算法中，dom只会与自己同一个层级的元素进行对比，发现差异时，就更改对应的及它以下所有的数据按照更改后的渲染。当对比更改完成后，再一次性的渲染到页面中。

这里请注意他更改的方式！！！

我这里只有三条数据，假如有一百条呢那么我在第三个位置插入一条数据，随后的每一条数据都要经过删掉，重新加载成之前挤到后面的数据，3变成4，4变成5其实又是重复操作浪费了大量性能，而且在这个过程中会出现一个严重的bug，3到了2的位置，2之前如果被标记过就会变成3被标记。这就好比2在自己2号位置时相当于在自己房间里，他给自己的房间买了一个电视，3现在占用了2的房间，那么3的房间现在是有电视的，2到了新的房间，他的电视没有了。这个情况显示是有问题的。

这时候key的作用就来了：

key就是你给每一个数据加了一个独一无二的id。它的作用就是，比如你去电影院买票，你现在有一号座位和二号座位，但是三号座位也是有的。只不过他空着，当第二次dom更新后，三号来了。他会坐在他的三号位置上，一号和二号都不用做出任何改变