一、 Vue中diff算法原理
理解:
1.先同级比较,在比较子节点
2.先判断一方有儿子一方没儿子的情况
3.比较都有儿子的情况
4.递归比较子节点
图:
1、原节点:ABCD,新节点:ABCDE,从头开始比较,E为新增的节点,头指针移动,将E插入到D的后面(从尾节点插入新元素E)
2、原节点:ABCD,新节点:EABCD,从头开始,发现节点不一致,又从尾节点开始比较,E为新增的节点,尾指针移动,将E插入到A的前面(从头节点插入新元素E)
3、原节点:ABCD,新节点:DABC,无论从头还是尾开始比较,头头(A!=D),尾尾(D!=C)比较都不相等,再头与尾比较(A!=C,D==D),直接把D移到A前面(将最后D移动至A前面)
4、原节点:ABCD,新节点:BCDA,无论从头还是尾开始比较,头头(A!=B),尾尾(D!=A)比较都不相等,再头与尾比较(A==A,D!=B)(将前头A移到D之后)
5、原节点:ABCD,新节点:CDME,头头、尾尾、头尾比较都不相等
指针从新节点的C和原节点的A开始,用C的key去原节点里找,找到了之后插入到A之前;
指针来到D,同样用D的key去原节点里找,找到了之后插入到A之前(C之后);
M找不到,直接插入到A之前(D之后),E找不到,直接插入到A之前(M之后);
AB最后在新节点中找不到,直接置null,最后删除AB
源码:src/core/vdom/patch.js
const oldCh = oldVnode.children // 老的儿子
const ch = vnode.children // 新的儿子
if (isUndef(vnode.text)) {
if (isDef(oldCh) && isDef(ch)) {
// 比较孩子
if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
}else if (isDef(ch)) {
// 新的儿子有 老的没有
if (isDef(oldVnode.text))
nodeOps.setTextContent(elm, '')
addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
}else if (isDef(oldCh)) {
// 如果老的有新的没有 就删除
removeVnodes(oldCh, 0, oldCh.length - 1)
}else if (isDef(oldVnode.text))