【Vue.js设计与实现】第三篇第10章：渲染器-双端 Diff 算法-阅读笔记

系列目录：【Vue.js设计与实现】阅读笔记目录

10.1　双端比较的原理

简单 Diff 算法的问题在于，它对 DOM 的移动操作并不是最优的。

如图：

按照简单Diff算法，它的移动有两次如下：

然而，上述更新过程并非最优解。在这个例子中，其实只需要通过一步DOM 节点的移动操作即可完成更新，即只需要把真实 DOM 节点 p-3 移动到真实 DOM 节点 p-1 前面：

简单Diff算法做不到这点，但双端Diff算法可以。接下来将介绍此算法。

双端 Diff 算法是一种同时对新旧两组子节点的两个端点进行比较的算法。

如图，有四个索引：

• 新子节点头
• 新子节点尾
• 旧子节点头
• 旧子节点尾

对应有四个节点。

1. 比较新子节点头和旧子节点头，若相同，说明想从旧到新，旧节点头不需要动，更新新旧子节点头的索引和节点即可
2. 比较新子节点尾和旧子节点尾，若相同，说明想从旧到新，旧节点尾不需要动，更新新旧子节点尾的索引和节点即可
3. 比较旧子节点头和新子节点尾，若相同，说明想从旧到新，旧子节点头需要到旧子节点尾后，还要更新旧子节点头和新子节点尾的索引和节点
4. 比较旧子节点尾和新子节点头，若相同，说明想从旧到新，旧子节点尾需要到旧子节点头前，还要更新旧子节点尾和新子节点头的索引和节点

一致循环上述过程，知道新/旧 节点头尾相遇。

举例：

第一轮比较：旧子节点尾和新子节点头 相同，说明旧子节点尾需要到旧子节点头前，即4到1前，更新索引，即：

第二轮比较：新子节点尾和旧子节点尾相同，不需要移动，更新索引，即：

第三轮比较：旧子节点头和新子节点尾相同，旧子节点头需要到旧子节点尾后，即1到2后（此时2是旧子节点尾），更新索引，即：

第四轮比较：新子节点头和旧子节点头相同，结束。

代码：

const patchKeyedChildren = (n1, n2, container) => {
   
	const oldChildren = n1.children;
	const newChildren = n2.children;
	// 四个索引值
	let oldStartIdx = 0,
		oldEndIdx = oldChildren.length - 1,
		newStartIdx = 0,
		newEndIdx = newChildren.length - 1;
	// 四个索引值指向的vnode节点
	let oldStartVNode = oldChildren[oldStartIdx],
		oldEndVNode = oldChildren[oldEndIdx],
		newStartVNode = newChildren[newStartIdx],
		newEndVNode = newChildren[newEndIdx];

	while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
   
		if (oldStartVNode.key === newStartVNode.key) {
   
			// 第一步
			patch(oldStartVNode, newStartVNode, container);
			oldStartVNode = oldChildren[++oldStartIdx];
			newStartVNode = newChildren[++newStartIdx];
		} else if (oldEndVNode.key === newEndVNode.key) {
   
			// 第二步
			// 都在尾部，不需要移动
			patch(oldEndVNode, newEndVNode, container);
			oldEndVNode = oldChildren[--oldEndIdx];
			newEndVNode = newChildren[--newEndIdx];
		} else