面试题：diff算法

什么是diff算法

diff算法是一个Virtual DOM的加速器，其算法的改进优化是React整个界面渲染的基础和性能的保障，同时也是React源码中最神秘的，最不可思议的部分。vue中，diff算法就是让新虚拟dom, 和旧的虚拟dom相比较。

vue中diff算法分析

vue中用diff就是通过同级比较dom树，来进行重绘或者回流。分为三种情况：

1.根元素变了，删除重建整个DOM树
2.根元素没变，属性改变，更新属性，元素复用
3.根元素和子元素都没变，但元素里的内容改变
没有设置key值（key就是for循环里面的key）
v-for 不会移动DOM，而是复用DOM元素，就地更新
有key值
因为新旧虚拟DOM对比，key存在就复用此标签更新内容，如果不存在就直接创建一个新的v-for先循环产生新的DOM结构， key是连续的，和数据对应然后比较新旧DOM结构，找到区别，打补丁到页面上最后补一个li，然后从第二个往后，都要更新内容。
key值只能是唯一不重复的，字符串或数值，新DOM里数据的key存在, 去旧的虚拟DOM结构里找到key标记的标签，复用标签新DOM里数据的key存在，去旧的虚拟DOM结构里没有找到key标签的标签，创建旧DOM结构的key，在新的DOM结构里没有了，则移除key所在的标签。不加key值不影响功能，添加key值可以提高更新性能

总结

根元素改变 – 删除当前DOM树重新建

根元素未变, 属性改变 – 更新属性

根元素未变, 子元素/内容改变

无key – 就地更新 / 有key – 按key比较