Vue 3.0 源码学习：深入剖析初始化流程（3.patch 过程）

2024-01-06 17:14:05

前言

在 Vue 3.0 的渲染过程中，patch 函数扮演着至关重要的角色。它的职责是比较新旧节点之间的差异，并通过打补丁的方式进行针对性的操作，包括新增、删除、移动或替换。本文将深入分析 Vue 3.0 中 patch 函数的实现，帮助读者理解 Vue 如何高效地进行渲染更新。

patch 过程概述

patch 过程可以概括为以下步骤：

比较新旧节点： 将新旧 vnode 进行比较，找出差异点。
创建补丁列表： 根据差异点，创建包含补丁操作的列表。
应用补丁： 遍历补丁列表，对真实 DOM 执行相应的操作。

补丁操作类型

Vue 3.0 中的补丁操作主要有以下几种：

新增： 在指定位置插入新节点。
删除： 移除指定节点。
移动： 将指定节点移动到新位置。
替换： 用新节点替换旧节点。

patch 函数实现

patch 函数的实现位于 packages/runtime-core/src/patch.ts 中。它接受新旧 vnode、父 vnode 和 DOM 环境作为参数，并返回一个补丁列表。

export function patch(
  n1: VNode | null, // 旧 vnode
  n2: VNode | null, // 新 vnode
  container: DOMContainer, // DOM 环境
  anchor: DOMNode | null = null // 锚节点
): Patch | null;

1. 比较新旧节点

patch 函数首先通过递归的方式比较新旧 vnode，找出差异点。比较逻辑根据 vnode 的类型不同而有所不同。

2. 创建补丁列表

在比较出差异点后，patch 函数会根据差异点创建补丁列表。补丁是一个包含以下信息的 JavaScript 对象：

interface Patch {
  type: PatchType; // 补丁类型
  vnode: VNode; // 相关 vnode
  parentNode: DOMNode; // 父节点
  anchor: DOMNode | null; // 锚节点
  prevSibling: DOMNode | null; // 前一个兄弟节点
  nextSibling: DOMNode | null; // 下一个兄弟节点
}