vue3从精通到入门3：patch函数源码实现方式

Vue3中的patch函数是Vue渲染系统的核心部分，它负责比较新旧虚拟DOM（VNode）节点，并根据比较结果更新实际的DOM:

patch函数：

先了解下patch函数源码，再进行对其中的解析：

function patch(  
  n1: VNode | null,  // 旧虚拟DOM
  n2: VNode,  // 新的虚拟DOM
  container: HostNode,  
  anchor: ?HostNode = null,  
  parentComponent: ?Component = null,  
  parentSuspense: ?SuspenseBoundary = null,  
  isSVG: boolean = false,  
  optimized: boolean = false  
): VNode {  
  // ...  
  const { type, ref, shapeFlag } = n2;  
  
  switch (type) {  
    case Text:  
      // 处理文本节点  
      processText(n1, n2, container, anchor)
      break;  
    case Comment:  
      // 处理注释节点  
      processCommentNode(n1, n2, container, anchor) 
      break;  
    case Static:  
      // 处理静态节点  
       if (n1 == null) {
          mountStaticNode(n2, container, anchor, namespace)
        } else if (__DEV__) {
          patchStaticNode(n1, n2, container, namespace)
        }  
      break;  
    case Fragment:  
      // 处理 Fragment 节点  
      processFragment(
          n1,
          n2,
          container,
          anchor,
          parentComponent,
          parentSuspense,
          namespace,
          slotScopeIds,
          optimized,
        ) 
      break;  
    default:  
      // 处理元素或组件节点  
      if (shapeFlag & ShapeFlags.ELEMENT) {  
        // ... 处理元素节点 ...  
        processElement(
            n1,
            n2,
            container,
            anchor,
            parentComponent,
            parentSuspense,
            namespace,
            slotScopeIds,
            optimized,
          )
      } else if (shapeFlag & ShapeFlags.COMPONENT) {  
        // ... 处理组件节点 ...  
        processComponent(
            n1,
            n2,
            container,
            anchor,
            parentComponent,
            parentSuspense,
            namespace,
            slotScopeIds,
            optimized,
          )
      }  else if (shapeFlag & ShapeFlags.TELEPORT) {
          ;(type as typeof TeleportImpl).process(
            n1 as TeleportVNode,
            n2 as TeleportVNode,
            container,
            anchor,
            parentComponent,
            parentSuspense,
            namespace,
            slotScopeIds,
            optimized,
            internals,
          )
        } else if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
          ;(type as typeof SuspenseImpl).process(
            n1,
            n2,
            container,
            anchor,
            parentComponent,
            parentSuspense,
            namespace,
            slotScopeIds,
            optimized,
            internals,
          )
        } 
      // ...  
  }  
  
  // ... 其他逻辑，如处理子节点、引用、挂载等 ...  
}

patch解析：

以下我们以简化版解析：

1：processText处理文本节点：

processText 函数的主要作用是更新或创建文本节点。它的工作原理相对简单，因为它不涉及复杂的子节点或属性比较。

以下是 processText 函数的一个简化解析：

function processText(n1: VNodeText | null, n2: VNodeText, container: HostNode) {  
  if (n1 == null) {  
    // 如果旧节点为空（即第一次渲染文本），则创建新的文本节点  
    container.appendChild(createText(n2.text));  
  } else {  
    // 如果旧节点存在，则比较新旧文本内容  
    const el = n1.el as Text;  
    if (n1.text !== n2.text) {  
      // 如果文本内容不同，则更新文本节点的内容  
      el.textContent = n2.text;  
    }  
  }  
}

在这个简化的 processText 函数中：

• n1 是旧文本节点（VNodeText 类型），n2 是新文本节点。
• container 是文本节点应该被附加到的父 DOM 元素。

2:  processCommentNode处理注释节点：

注释节点在虚拟 DOM 中主要用于标记某些特殊的位置或状态，但它们并不直接映射到真实的 DOM 注释节点。在 Vue 3 中，注释节点主要用于内部优化和特定功能的实现，例如用于标记 v-if 指令的条件分支或插槽的边界。

processCommentNode 函数的主要任务是处理这些注释节点，确保它们在渲染过程中被正确处理。下面是该函数的一个简化解析：

function processCommentNode(  
  n1: VNodeComment | null,  
  n2: VNodeComment,  
  container: HostNode  
) {  
  // 如果旧注释节点不存在，创建新的注释节点  
  if (n1 == null) {  
    container.appendChild(createComment(n2.text));  
  } else {  
    // 如果旧注释节点存在，且新旧注释内容不同，更新注释内容  
    const el = n1.el as Comment;  
    if (n1.text !== n2.text) {  
      el.textContent = n2.text;  
    }  
  }  
}

在这个简化的 processCommentNode 函数中：

• n1 是旧注释节点（如果存在的话），n2 是新注释节点。
• container 是注释节点应该被附加到的父 DOM 元素。

3:  mountStaticNode：

静态节点是指那些在渲染过程中不会改变的节点。Vue 3 在编译阶段能够识别出这些节点，并在运行时跳过对它们的比较和更新，从而提高性能。mountStaticNode 函数的主要任务是将静态节点挂载到实际的 DOM 中。

下面是 mountStaticNode 函数的一个简化解析：

function mountStaticNode(node: VNodeStatic, container: HostNode) {  
  // 创建静态节点的 DOM 元素  
  const el = (node.el = createStaticNode(node));  
  // 将创建的 DOM 元素挂载到父容器中  
  container.appendChild(el);  
}

 在这个简化的 mountStaticNode 函数中：

• node 是一个静态节点（VNodeStatic 类型）。
• container 是静态节点应该被附加到的父 DOM 元素。

4:  patchStaticNode：

patchStaticNode 函数的主要任务是确保静态节点在更新过程中保持静态，并且只在必要时才进行 DOM 操作。这通常意味着，如果静态节点在父节点中的位置没有改变，并且它自身也没有改变，那么 patchStaticNode 将不会执行任何 DOM 操作。

下面是一个简化的 patchStaticNode 函数解析：

function patchStaticNode(n1: VNodeStatic | null, n2: VNodeStatic, container: HostNode) {  
  // 如果旧节点不存在，则创建新的静态节点  
  if (n1 == null) {  
    mountStaticNode(n2, container);  
  } else {  
    // 如果新旧节点是同一个引用（即没有变化），则不需要进行任何操作  
    if (n1 === n2) {  
      return;  
    }  
    // 检查静态节点的 key 是否发生变化，如果发生变化，则需要进行特殊处理  
    if (n1.key !== n2.key) {  
      // 这里可能需要进行更复杂的逻辑处理，比如移动节点等  
    } else {  
      // 如果只是静态节点的内容属性发生变化，但不需要更新 DOM，则忽略这些变化  
      // ...（其他属性比较逻辑）  
    }  
    // 在某些情况下，即使节点是静态的，也可能需要更新其子节点  
    // 因此，这里可能需要递归调用 patch 函数来处理子节点  
  }  
}

在这个简化的 patchStaticNode 函数中：

• n1 是旧静态节点（如果存在的话），n2 是新静态节点。
• container 是静态节点应该被附加到的父 DOM 元素。

5:  processFragment：

在解析 processFragment 函数之前，我们需要了解 Fragment 在 Vue 3 中的用途。Fragment 允许组件返回一个数组，其中每个数组项都是一个根节点。这在某些情况下很有用，比如当你需要渲染一个列表项的同时又需要渲染一些其他的元素。

下面是一个简化的 processFragment 函数的解析，注意，实际的源码可能更复杂并包含更多的优化和边界情况处理。

function processFragment(  
  n1: Fragment,  
  n2: Fragment,  
  container: HostNode,  
  anchor: ?HostNode,  
  parentComponent: ?Component,  
  parentSuspense: ?SuspenseBoundary,  
  isSVG: boolean,  
  optimized: boolean  
) {  
  const { patchFlag, dynamicChildren, children } = n2;  
  
  if (patchFlag > 0) {  
    // 如果有 patchFlag，可能表示有特殊的优化标志  
    // 根据不同的 patchFlag 执行相应的逻辑  
    // ...  
  } else if (!optimized) {  
    // 如果不是优化模式，直接递归处理每个子节点  
    for (let i = 0; i < children.length; i++) {  
      const nextChild = (children[i] = optimized  
        ? cloneIfMounted(children[i])  
        : normalizeVNode(children[i]));  
      patch(  
        n1 ? n1.children[i] : null,  
        nextChild,  
        container,  
        null,  
        parentComponent,  
        parentSuspense,  
        isSVG,  
        optimized  
      );  
    }  
  }  
  
  // 处理动态子节点的情况  
  if (dynamicChildren) {  
    // ...  
    // 这里处理动态添加或移除的子节点  
  }  
  
  // 如果有锚点，则使用锚点将新节点附加到容器中  
  if (anchor) {  
    // ...  
    // 将新节点附加到锚点之前  
  }  
}

在上面的简化代码中，processFragment 函数接收新旧两个 Fragment 类型的 VNode，以及其他必要的参数。它首先检查新节点的 patchFlag 属性，该属性用于标识节点是否有特殊的更新策略。

• 如果有特殊的 patchFlag，它会执行相应的优化逻辑。
• 如果没有 patchFlag 或者在非优化模式下，函数会遍历新 Fragment 的每个子节点，并递归调用 patch 函数来更新或创建这些子节点。

此外，processFragment 还会处理动态子节点的情况，这通常涉及添加或移除子节点，并更新 DOM 以反映这些变化。

最后，如果有锚点（anchor），函数会使用锚点来将新创建的节点附加到容器中。这确保了新节点被放置在正确的位置。

6:  processElement：

processElement 函数的主要任务是确保元素节点在更新过程中保持正确的状态，并更新其属性、子节点等。

下面是一个简化的 processElement 函数解析：

function processElement(  
  n1: VNode | null,  
  n2: VNodeElement,  
  container: HostNode,  
  anchor: ?HostNode,  
  isSVG: boolean  
) {  
  if (n1 == null) {  
    // 如果旧元素节点不存在，则创建新的元素节点  
    mountElement(n2, container, anchor, isSVG);  
  } else {  
    // 如果旧元素节点存在，则进行更新操作  
    // 比较元素类型，如果不一致，则进行替换操作  
    if (n1.type !== n2.type) {  
      replaceElement(n2, n1, container, anchor, isSVG);  
    } else {  
      // 元素类型一致，更新元素的属性和子节点  
      updateElement(n1, n2, isSVG);  
    }  
  }  
}

在这个简化的 processElement 函数中：

• n1 是旧元素节点（如果存在的话），n2 是新元素节点。
• container 是元素节点应该被附加到的父 DOM 元素。
• anchor 是一个可选的锚点节点，用于确定新元素应该被插入到哪个位置。
• isSVG 是一个布尔值，指示元素是否属于 SVG 命名空间。

 7:  processComponent：

processComponent 函数的主要任务是确保组件实例在更新过程中保持正确的状态，并处理组件的挂载、更新或卸载。

下面是一个简化的 processComponent 函数解析：

function processComponent(  
  n1: VNodeComponent | null,  
  n2: VNodeComponent,  
  container: HostNode,  
  anchor: ?HostNode,  
  parentComponent: ComponentInternalInstance | null,  
  parentSuspense: SuspenseBoundary | null,  
  isSVG: boolean  
) {  
  if (n1 == null) {  
    // 如果旧组件节点不存在，则创建并挂载新组件  
    mountComponent(n2, container, anchor, parentComponent, parentSuspense, isSVG);  
  } else {  
    const instance = (n2.component = n1.component);  
    // 如果新旧组件是同一个引用，则进行更新操作  
    if (shouldUpdateComponent(n1, n2, parentComponent, optimized)) {  
      // 更新组件的 props 和其他选项  
      updateComponent(n1, n2, optimized);  
    } else {  
      // 如果不需要更新组件，则标记组件为不需要再次渲染  
      n2.component.shouldKeepAlive = true;  
    }  
    // 处理组件的子节点  
    const nextTree = renderComponentRoot(instance);  
    patch(n1.subTree, nextTree, container, null, parentComponent, parentSuspense, isSVG);  
  }  
}

在这个简化的 processComponent 函数中：

• n1 是旧组件节点（如果存在的话），n2 是新组件节点。
• container 是组件应该被附加到的父 DOM 元素。
• anchor 是一个可选的锚点节点，用于确定新组件应该被插入到哪个位置。
• parentComponent 是父组件实例，用于处理嵌套组件的情况。
• parentSuspense 是与组件相关的 Suspense 边界实例，用于处理异步组件的加载状态。
• isSVG 指示组件是否属于 SVG 命名空间。