什么是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比较