1:什么是diff算法?
所谓的diff算法就是数据更新后,生成新的虚拟DOM,新的v-node与旧的v-node进行对比,找出不同的区别进行操作,生成新的DOM的过程。
2、diff算法的优化方案:
如果按照常规的算法比较,将两个tree结构进行比较,那时间复杂度很高的,采用了diff算法会让时间复杂度从O(n³)减少到O(n),diff算法从下面3点中进行了优化:
(1)只比较同一层,不跨级比较
(2)tag不同则删掉重建(不在比较内部的细节)
(3)子节点通过key来区分(key的重要性)
3、React中diff算法 —仅右移
比如下图中的所示:
o(node)中的数据内容:a-b-c-d-e
n(node)中的数据内容:b-c-a-d-e
第一步:o(node)中的a与n(node)中的b比较发现内容不相同,同理不动。

第二步:o(node)中的b与n(node)中的c比较发现内容不相同,同理不动。

第三步:o(node)中的a与n(node)中的a比较发现内容相同,o(node)中的a向右移动到c后面,这样就完成了diff算法的整个过程。


4、Vue2中diff算法 —双端比较

vue2中diff算法定义四个指针:oldStartIdx、oldEndIdx、newStartIdx、newEndIdx。
让oldStartIdx与newStartIdx、oldStartIdx与newEndIdx、oldEndIdx与newEndIdx、oldEndIdx与newStartIdx两两进行比较,然后 oldStartIdx、oldEndIdx与newStartIdx、newEndIdx都分别向中间移动,在进行比较直到到达中间。
5、Vue3中diff算法 —最长递增子序列
如下图中的两个序列:

首先看o(node)与n(node)左边的两列都是A,B都相同,不用管,右侧末尾都是G都相同也不用管。
看两列中间部分:将n(node)中顺序不同的元素,按照o(node)的次序用数组标示出来,n(node)中跟上面不同的元素分别是 F C D E H 对应上面的元素数组分别是[5、2、3、4,-1],H是新增加的找不到对应的字母,暂时用-1代表,我们找出来F与H是需要操作的,其他不用一一调整。