vue中的diff算法

这是我参与更文挑战的第9天，活动详情查看：更文挑战

前言

Vue中在template编写的样式在编译的过程中会转换成虚拟DOM，然后在进行转换为真实DOM。虚拟DOM就是树状结构，现在有这样一个场景，我们生成了一个虚拟DOM然后又改变了这个虚拟DOM的节点信息，此时就生成了新树与旧树，vue中会将这两颗树进行diff算法，查出哪里变动了，从而进行局部替换，这样将使页面的渲染消耗没那么大。

查找出新旧树哪里改变了，哪里不同，新旧树对比有四个条件对应如下：

• 如果没有新树节点则代表在旧树中此节点给删除了。

• 如果旧树节点以及新树节点都是字符串，但新旧节点不相等则代表文本不同，文本进行了修改。

• 如果新旧树的元素类型相等例如 ‘div’ == ‘div’ ,则对比他们的属性是否一致，如果不一致则代表属性进行了修改。

• 如果新旧树的元素类型不匹配则代表进行了元素替换。

在对比哪里不同时，有一个需要注意的要点，由于虚拟DOM是树状结构，所以我们用递归进行遍历树，进行递归时我们传入一个下标，用来记录递归在那一次发现了新旧树的不同，将整个DOM树走完，我们就能得到一个对象，里面记录了新旧树不同的点，以及在递归的那一次发生了变化。例如：

如上图：递归的第一次就发现的变动下标为蓝框的0，第3次，第四次等都发现的新旧树中的变动，以此用对象+下标的形式记录新旧树中发生的变动，这样处理等我们进行转换真实DOM的时候，就能根据这个对象局部更新变动的节点。

在上面的步骤中我们已经找出了新旧树中不同的位置，接下来就是进行更新。

总结

局部更新真实DOM节点的思路：
递归旧树每一次递归下标都加一，用这个下标取出上图的变动信息集合对象，如果用下标取出来的这个对象节点不为空则代表当前节点的信息是有变动的。