1.无key 的diff算法 :
新旧节点对比,新节点替换旧节点,有多的新节点则新增,有多的旧节点则删除
2.有key 的diff算法:
vue3中:
1. 首序对比:新旧节点从头循环进行type和key的对比,如果两者都一样,进行下一次循环,如有不同则跳出循环进行尾序对比
2. 尾序对比:新旧节点从后循环进行type和key的对比,如果两者都一样,进行下一次循环,如有不同则跳出循环
3. 如果有多的新增节点,则进行挂载操作
4. 如果有多的旧节点,则进行卸载操作
5. 特殊情况乱序,进行最长递增子序列算法
vue2中:
1. 首序对比
2. 尾序对比
3. 新首旧尾对比
4. 新尾旧首对比
最长递增子序列算法--(后续理解)
getSequence([1, 3, 0, 6]) // [1, 3, 6]
getSequence([1, 3, 5, 7, 11, 6, 12]) // [1, 3, 5, 7, 11, 12]
getSequence([3, 7, 11, 15, 8, 11, 12]) // [3, 7, 11, 15, 12]