【面试题】详述虚拟DOM中的diff算法

详述虚拟DOM中的diff算法

解题思路：

1. 首先要先讲一下虚拟DOM是如何实现的

   虚拟DOM是通过js语法来在内存中维护一个通过数据解构描述出来的一个模拟DOM树，当数据发生改变的时候，会先对虚拟DOM进行模拟修改，然后在通过新的虚拟DOM树与旧的虚拟DOM树来对比，而这个对比就是通过diff算法来进行的

   虚拟DOM最大的意义不在于性能的提升（JavaScript对象比DOM对象性能高），而在于抽象了DOM的具体实现（对DOM进行了一层抽象）

2. 接着，来看一下diff算法是如何进行比对的

   正常的diff算法，是通过层层对比，单单对比来进行的，对于我们的前端性能来说，很明显是不可以这样实现的。

   

   前端的虚拟DOM对比

所以，前端的diff算法是通过以下步骤来实现的

步骤一：用JS对象模拟DOM树 步骤二：比较两棵虚拟DOM树的差异 步骤三：把差异应用到真正的DOM树上

同时维护新旧两棵虚拟DOM树，当数据发生改变的时候，开始执行对比

首先对根元素进行对比，如果根元素发生改变就直接对根元素替换

如果根元素没有发生改变的话，再对下一层元素进行对比，如果对比发现元素发生删除，就执行删除，发现元素被替换就执行替换，发现添加了新的元素就执行添加

对比的同时，会通过key值来判断元素是否发生改变，判断元素是仅仅位置发生改变还是需要整个替换或删除

如果不是元素发生改变的话，再对内容进行对比，如果是内容发生改变的话，就直接修改内容

其实就是进行逐层对比，再通过不同的对比来判断执行不同的操作