各位观众老爷，大家好！我是你们的老朋友，今天咱来聊聊Vue 3源码里头一个重量级的角色：patch函数。这玩意儿啊，是虚拟DOM的发动机，专门负责把新老虚拟DOM进行比较，然后精确地更新真实DOM，就像外科医生做手术一样，尽量少动刀，只切除病灶。
咱们这次就来扒一扒patch函数的底裤，看看它到底是怎么实现DOM Diff算法的。准备好了吗？上车！
一、虚拟DOM是个啥？为啥要Diff？
在深入patch函数之前，咱们先简单回顾一下虚拟DOM。简单来说，虚拟DOM就是一个用JavaScript对象来描述真实DOM结构的东西。它轻量级，可以随意修改，而且修改起来还很快。
想象一下，你要修改一个页面，如果直接操作真实DOM，那浏览器得重新渲染页面，这代价可大了。但如果你先修改虚拟DOM，然后把修改后的虚拟DOM和之前的虚拟DOM进行比较（Diff），找出需要修改的部分，最后再把这些修改应用到真实DOM上，这样就能大大提高性能了。
这就好比你要装修房子，与其把整个房子推倒重来，不如先设计好图纸（虚拟DOM），然后根据图纸，只修改需要修改的地方（Diff & Patch）。
二、patch函数：DOM Diff 的掌舵人
patch函数的作用就是接收两个虚拟DOM节点（n1 和 n2），然后将 n2 更新到 n1 上。简单来说，就是把n2变成最新的，然后同步到真实dom。它的核心思想就是尽可能地复用已有的DOM节点，只对需要修改的部分进行更新。
patch函数的整体结构大致如下：
function patch(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {
// ... 一堆判断和处理逻辑
const { type, shapeFlag } = n2;
switch (type) {
case Text:
// 处理文本节点
processText(n1, n2, container, anchor);
break;
case Comment:
// 处理注释节点
processCommentNode(n1, n2, container, anchor);
break;
case Static:
// 处理静态节点
processStaticContent(n1, n2, container, anchor, isSVG);
break;
case Fragment:
// 处理 Fragment 节点
processFragment(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);
break;
default:
if (typeof type === 'string') {
// 处理元素节点
processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);
} else if (isTeleport(type)) {
// 处理 Teleport 节点
type.process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, internals);
} else if (isSuspense(type)) {
// 处理 Suspense 节点
type.process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, internals);
} else {
// 处理组件节点
processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);
}
}
}可以看到，patch函数根据不同类型的节点，调用不同的处理函数。接下来，咱们挑几个重点的处理函数来详细分析。
三、processElement：元素节点的大管家
processElement函数负责处理元素节点的更新。它会先判断新老节点是否是同一个类型的元素，如果是，则进入更新流程；否则，直接替换整个元素。
function processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {
if (n1 == null) {
// 新节点，创建元素
mountElement(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);
} else {
// 老节点存在，更新元素
patchElement(n1, n2, parentComponent, parentSuspense, isSVG, optimized);
}
}mountElement函数负责创建新的元素，这个咱们就不细说了。重点是patchElement函数，它负责更新已有的元素。
四、patchElement：元素节点的精细化更新
patchElement函数是整个元素更新的核心。它主要做了以下几件事：
- 比较属性 (props)： 调用
patchProps函数，比较新老节点的属性，添加、删除或更新属性。 - 比较子节点 (children)： 调用
patchChildren函数，比较新老节点的子节点，添加、删除或更新子节点。
function patchElement(n1, n2, parentComponent, parentSuspense, isSVG, optimized) {
const el = (n2.el = n1.el); // 复用老节点的 DOM 元素
const oldProps = n1.props || EMPTY_OBJ;
const newProps = n2.props || EMPTY_OBJ;
// 1. 比较属性
patchProps(
el,
n2,
oldProps,
newProps,
parentComponent,
parentSuspense,
isSVG
);
// 2. 比较子节点
patchChildren(
n1,
n2,
el,
null,
parentComponent,
parentSuspense,
isSVG,
optimized
);
}五、patchProps：属性的增删改查
patchProps函数负责比较新老节点的属性，并更新真实DOM。它会遍历新老节点的属性，进行以下操作：
- 添加新属性： 如果新节点有，老节点没有，则添加新属性。
- 删除旧属性： 如果老节点有，新节点没有，则删除旧属性。
- 更新属性值： 如果新老节点都有，但属性值不同，则更新属性值。
function patchProps(el, vnode, oldProps, newProps, parentComponent, parentSuspense, isSVG) {
if (oldProps !== newProps) {
for (const key in newProps) {
const next = newProps[key];
const prev = oldProps[key];
if (next !== prev) {
// 更新属性
patchProp(
el,
key,
prev,
next,
isSVG,
vnode.children,
parentComponent,
parentSuspense,
unmountChildren
);
}
}
if (oldProps !== EMPTY_OBJ) {
for (const key in oldProps) {
if (!(key in newProps)) {
// 删除属性
patchProp(
el,
key,
oldProps[key],
null,
isSVG,
vnode.children,
parentComponent,
parentSuspense,
unmountChildren
);
}
}
}
}
}patchProp函数才是真正操作DOM属性的地方。它会根据属性的类型，调用不同的方法来更新属性。例如，对于普通的属性，直接使用 el.setAttribute() 方法；对于事件监听器，则添加或删除事件监听器。
六、patchChildren：子节点的乾坤大挪移
patchChildren函数是整个DOM Diff算法的重头戏。它负责比较新老节点的子节点，并更新真实DOM。Vue 3 对子节点的Diff算法进行了优化，主要有以下几种情况：
- 新节点是文本节点： 如果新节点是文本节点，直接替换老节点的所有子节点。
- 老节点是文本节点： 如果老节点是文本节点，直接替换成新节点的子节点。
- 新老节点都是数组： 这就是最复杂的情况，需要进行Diff算法。
咱们重点来看看新老节点都是数组的情况。Vue 3 使用了一种叫做“双端Diff”的算法，来尽可能地减少DOM操作。
function patchChildren(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) {
const c1 = n1.children;
const c2 = n2.children;
const prevShapeFlag = n1.shapeFlag;
const shapeFlag = n2.shapeFlag;
if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
// 新节点是文本节点
if (prevShapeFlag & ShapeFlags.ARRAY_CHILDREN) {
// 老节点是数组，先卸载老节点
unmountChildren(c1, parentComponent, parentSuspense);
}
// 设置文本节点
hostSetElementText(container, c2);
} else {
// 新节点不是文本节点
if (prevShapeFlag & ShapeFlags.ARRAY_CHILDREN) {
// 老节点是数组
if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
// 新节点也是数组，进行Diff算法
patchKeyedChildren(
c1,
c2,
container,
anchor,
parentComponent,
parentSuspense,
isSVG,
optimized
);
} else {
// 新节点不是数组，卸载老节点
unmountChildren(c1, parentComponent, parentSuspense, true);
}
} else {
// 老节点不是数组
if (prevShapeFlag & ShapeFlags.TEXT_CHILDREN) {
// 老节点是文本节点，清空文本节点
hostSetElementText(container, '');
}
if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
// 新节点是数组，挂载新节点
mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);
}
}
}
}七、patchKeyedChildren：双端Diff算法的精髓
patchKeyedChildren 函数是双端Diff算法的具体实现。它的核心思想是：
- 从两端向中间比较： 从新老节点的两端开始比较，如果相同，则继续向中间比较。
- 处理相同的前缀和后缀： 找到相同的前缀和后缀，可以减少需要Diff的节点数量。
- 处理插入、删除和移动： 对于剩下的节点，需要判断是插入、删除还是移动操作。
- 使用
key来提高效率： 通过key属性，可以更准确地判断节点是否相同，从而提高Diff效率。
双端Diff算法的流程大致如下：
- 初始化指针： 初始化
i指向老节点的开始，e1指向老节点的结尾，j指向新节点的开始，e2指向新节点的结尾。 - 比较相同的前缀： 从
i和j开始，比较新老节点是否相同，如果相同，则i++和j++，直到遇到不同的节点。 - 比较相同的后缀： 从
e1和e2开始，比较新老节点是否相同，如果相同，则e1--和e2--，直到遇到不同的节点。 - 处理剩余节点： 经过前两步，剩下的节点就是需要进行Diff的节点。
- 新节点多于老节点： 如果
i > e1，说明新节点多于老节点，需要插入新的节点。 - 老节点多于新节点： 如果
j > e2，说明老节点多于新节点，需要删除老的节点。 - 乱序情况： 如果以上情况都不满足，说明节点是乱序的，需要进行更复杂的Diff操作。
function patchKeyedChildren(
c1,
c2,
container,
anchor,
parentComponent,
parentSuspense,
isSVG,
optimized
) {
let i = 0;
const l2 = c2.length;
let e1 = c1.length - 1;
let e2 = l2 - 1;
// 1. 从头开始比较，处理相同的前缀
while (i <= e1 && i <= e2) {
const n1 = c1[i];
const n2 = c2[i];
if (isSameVNodeType(n1, n2)) {
patch(
n1,
n2,
container,
null,
parentComponent,
parentSuspense,
isSVG,
optimized
);
} else {
break;
}
i++;
}
// 2. 从尾开始比较，处理相同的后缀
while (i <= e1 && i <= e2) {
const n1 = c1[e1];
const n2 = c2[e2];
if (isSameVNodeType(n1, n2)) {
patch(
n1,
n2,
container,
null,
parentComponent,
parentSuspense,
isSVG,
optimized
);
} else {
break;
}
e1--;
e2--;
}
// 3. 新的比老的多，创建
if (i > e1) {
if (i <= e2) {
const nextPos = e2 + 1;
const anchor = nextPos < l2 ? c2[nextPos].el : anchor;
while (i <= e2) {
patch(
null,
c2[i],
container,
anchor,
parentComponent,
parentSuspense,
isSVG,
optimized
);
i++;
}
}
}
// 4. 老的比新的多，删除
else if (i > e2) {
while (i <= e1) {
unmount(c1[i], parentComponent, parentSuspense, true);
i++;
}
}
// 5. 乱序
else {
// ... (处理乱序的情况，使用key进行比较)
}
}八、乱序情况的处理
对于乱序的情况，patchKeyedChildren 函数会使用 key 属性来判断节点是否相同。它会创建一个 keyToNewIndexMap，用来存储新节点 key 和索引的对应关系。然后遍历老节点，如果老节点的 key 在 keyToNewIndexMap 中存在，则说明该节点在新节点中存在，需要更新；否则，说明该节点在新节点中不存在，需要删除。
遍历新节点，如果新节点的 key 在 keyToNewIndexMap 中不存在，则说明该节点是新增的，需要插入。
最后，根据 keyToNewIndexMap，可以计算出一个最长递增子序列，用来确定哪些节点是可以复用的，哪些节点是需要移动的。
这部分代码比较复杂，涉及到一些算法知识，咱们就不在这里展开了。
九、总结
patch函数是Vue 3虚拟DOM的核心，它通过DOM Diff算法，尽可能地复用已有的DOM节点，只对需要修改的部分进行更新，从而大大提高了性能。
咱们今天主要讲了patch函数的基本结构，以及processElement、patchProps、patchChildren和patchKeyedChildren等几个重要的处理函数。
当然，patch函数还有很多细节，例如对不同类型节点的处理、对事件监听器的处理等等，这些都需要大家在阅读源码的过程中慢慢体会。
希望今天的讲解对大家有所帮助。下次有机会，咱们再聊聊Vue 3的其他源码。感谢大家的收看！
附：常用数据结构和算法
| 数据结构/算法 | 描述 |
|---|---|
| 数组 | 用于存储相同类型元素的集合。在patchChildren中，新老子节点列表都是数组。 |
| 对象 (Map) | 用于存储键值对。在乱序Diff中，keyToNewIndexMap就是一个对象，用于快速查找新节点中key对应的index。 |
| 双指针 | 用于同时从数组的两端进行遍历。双端Diff算法中，使用i和e1从老节点两端遍历，j和e2从新节点两端遍历。 |
| 最长递增子序列 | 用于优化DOM移动操作。在乱序Diff中，找到最长递增子序列，可以确定哪些节点不需要移动，从而减少DOM操作。 |
| 递归 | patch函数本身就是一个递归函数，它会递归地比较和更新子节点。 |
| 位运算 | Vue 3 使用位运算来标记节点的类型和状态 (ShapeFlags)。例如，shapeFlag & ShapeFlags.TEXT_CHILDREN用于判断节点是否是文本节点。 |
希望这张表能帮大家更好地理解patch函数中用到的数据结构和算法。
大家有什么问题，可以在评论区留言，我会尽力解答。
拜拜！