[Vue源码] Vue中diff算法原理

一、 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))