diff算法的目的是为了找出需要更新的节点,而未变化的节点则可以复用
新旧列表的头尾先互相比较。未找到可复用则开始遍历,对比过程中指针逐渐向列表中间靠拢,直到遍历完其中一个列表
具体策略如下:
-
同层级比较
Vue2的diff算法只会比较同一层级的节点,不会跨层级比较。 -
双指针法(双端比较)
Vue2从新旧虚拟DOM树的头部和尾部开始比较
头头比较:如果新旧节点的头部相同,则直接更新节点并移动头部指针。
尾尾比较:如果新旧节点的尾部相同,则直接更新节点并移动尾部指针。
头尾交叉比较:如果旧节点的头部与新节点的尾部相同,则将旧节点移动到尾部,并移动指针。
尾头交叉比较:如果旧节点的尾部与新节点的头部相同,则将旧节点移动到头部,并移动指针。 -
Vue2通过 key 属性来优化节点的复用。如果新旧节点的 key 相同,则认为它们是同一个节点,只需更新属性和内容;否则会进行插入、删除或移动操作 。
-
节点类型不同:直接替换整个节点。节点类型相同:比较节点的属性和子节点,递归调用diff算法处理子节点 。