分析vue3源码9（diff算法）本文我们将深入分析 `processElement` 函数的实现，看看 Vue 是如何

processElement函数分析

前言

上一节我们分析到了 setupRenderEffect 函数的实现。至此，我们已经完成了组件级别的渲染流程的分析。setupRenderEffect 函数通过调用 patch 函数来处理组件的更新。而 patch 函数会根据虚拟节点的类型进行不同处理。对于组件节点会递归处理其子组件，对于普通元素节点则会调用 processElement 函数进行处理。

这种递归调用形成了一个树形的渲染结构：从根组件开始，通过 patch 函数逐层向下处理，直到遇到普通元素节点。此时就从组件级别的渲染转换为 DOM 元素级别的渲染，通过 processElement 函数实现。

本文我们将深入分析 processElement 函数的实现，看看 Vue 是如何将虚拟 DOM 节点转换为真实的 DOM 元素（DOM 级别的 diff）。

函数定义

const processElement = (
  n1: VNode | null,
  n2: VNode,
  container: RendererElement,
  anchor: RendererNode | null,
  parentComponent: ComponentInternalInstance | null,
  parentSuspense: SuspenseBoundary | null,
  namespace: ElementNamespace,
  slotScopeIds: string[] | null,
  optimized: boolean,
) => {
  // 处理特殊的命名空间
  if (n2.type === 'svg') {
    namespace = 'svg'
  } else if (n2.type === 'math') {
    namespace = 'mathml'
  }

  // 根据是否存在旧节点判断是挂载还是更新
  if (n1 == null) {
    mountElement(
      n2,
      container,
      anchor,
      parentComponent,
      parentSuspense,
      namespace,
      slotScopeIds,
      optimized,
    )
  } else {
    patchElement(
      n1,
      n2,
      parentComponent,
      parentSuspense,
      namespace,
      slotScopeIds,
      optimized,
    )
  }
}

mountElement详细分析

让我们先看看mountElement函数的完整实现：

const mountElement = (
  vnode: VNode,
  container: RendererElement,
  anchor: RendererNode | null,
  parentComponent: ComponentInternalInstance | null,
  parentSuspense: SuspenseBoundary | null,
  namespace: ElementNamespace,
  slotScopeIds: string[] | null,
  optimized: boolean,
) => {
  let el: RendererElement
  const { props, shapeFlag, transition, dirs } = vnode

  // 1. 创建DOM元素
  el = vnode.el = hostCreateElement(
    vnode.type as string,
    namespace,
    props && props.is,
    props,
  )

  // 2. 处理子节点
  if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
    // 文本子节点直接设置文本内容
    hostSetElementText(el, vnode.children as string)
  } else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
    // 数组子节点需要递归挂载
    mountChildren(
      vnode.children as VNodeArrayChildren,
      el,
      null,
      parentComponent,
      parentSuspense,
      resolveChildrenNamespace(vnode, namespace),
      slotScopeIds,
      optimized,
    )
  }

  // 3. 处理指令
  if (dirs) {
    invokeDirectiveHook(vnode, null, parentComponent, 'created')
  }

  // 4. 设置scopeId
  setScopeId(el, vnode, vnode.scopeId, slotScopeIds, parentComponent)

  // 5. 处理props
  if (props) {
    // 先处理除value之外的属性
    for (const key in props) {
      if (key !== 'value' && !isReservedProp(key)) {
        hostPatchProp(el, key, null, props[key], namespace, parentComponent)
      }
    }
    // 特殊处理value属性
    if ('value' in props) {
      hostPatchProp(el, 'value', null, props.value, namespace)
    }
  }

  // 6. 处理过渡动画
  if (transition && !transition.persisted) {
    transition.beforeEnter(el)
  }

  // 7. 插入DOM
  hostInsert(el, container, anchor)
}

整体流程

创建DOM元素
处理子节点（文本或数组）
处理指令
设置作用域ID
处理属性
插入到DOM中

详细分析

1. 创建DOM元素

el = vnode.el = hostCreateElement(
  vnode.type as string,
  namespace,
  props && props.is,
  props,
)

这一步通过平台特定的API创建真实DOM元素。hostCreateElement是一个适配器函数，在不同平台（如浏览器、服务器等）有不同的实现。它的参数包括：

type: 元素类型（如'div'、'span'等）
namespace: 命名空间（用于svg等特殊元素）
is: Web Components的支持
props: 元素的属性集合

2. 处理子节点

if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
  hostSetElementText(el, vnode.children as string)
} else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
  mountChildren(
    vnode.children as VNodeArrayChildren,
    el,
    null,
    parentComponent,
    parentSuspense,
    resolveChildrenNamespace(vnode, namespace),
    slotScopeIds,
    optimized,
  )
}

子节点处理分为两种情况：

文本子节点：直接设置元素的文本内容，这是最简单的情况
数组子节点：需要递归处理每个子节点，这可能会触发新的渲染周期

3. 属性处理

if (props) {
  for (const key in props) {
    if (key !== 'value' && !isReservedProp(key)) {
      hostPatchProp(el, key, null, props[key], namespace, parentComponent)
    }
  }
  if ('value' in props) {
    hostPatchProp(el, 'value', null, props.value, namespace)
  }
}

属性处理的特点：

value属性单独处理，确保正确的设置顺序
使用hostPatchProp适配不同平台的属性设置方式
过滤保留属性，避免处理特殊属性

patchElement详细分析

接下来看看patchElement函数的完整实现：

const patchElement = (
  n1: VNode,
  n2: VNode,
  parentComponent: ComponentInternalInstance | null,
  parentSuspense: SuspenseBoundary | null,
  namespace: ElementNamespace,
  slotScopeIds: string[] | null,
  optimized: boolean,
) => {
  // 1. 复用DOM元素
  const el = (n2.el = n1.el!)
  
  // 2. 获取新旧props和其他需要的信息
  let { patchFlag, dynamicChildren, dirs } = n2
  const oldProps = n1.props || EMPTY_OBJ
  const newProps = n2.props || EMPTY_OBJ

  // 3. 调用beforeUpdate钩子
  if (dirs) {
    invokeDirectiveHook(n2, n1, parentComponent, 'beforeUpdate')
  }

  // 4. 处理子节点更新
  if (dynamicChildren) {
    // 优化模式：只更新动态子节点
    patchBlockChildren(
      n1.dynamicChildren!,
      dynamicChildren,
      el,
      parentComponent,
      parentSuspense,
      resolveChildrenNamespace(n2, namespace),
      slotScopeIds,
    )
  } else if (!optimized) {
    // 完整diff
    patchChildren(
      n1,
      n2,
      el,
      null,
      parentComponent,
      parentSuspense,
      resolveChildrenNamespace(n2, namespace),
      slotScopeIds,
      false,
    )
  }

  // 5. 根据patchFlag优化更新props
  if (patchFlag > 0) {
    if (patchFlag & PatchFlags.FULL_PROPS) {
      // 完整props更新
      patchProps(el, oldProps, newProps, parentComponent, namespace)
    } else {
      // 按需更新class
      if (patchFlag & PatchFlags.CLASS) {
        if (oldProps.class !== newProps.class) {
          hostPatchProp(el, 'class', null, newProps.class, namespace)
        }
      }
      // 按需更新style
      if (patchFlag & PatchFlags.STYLE) {
        hostPatchProp(el, 'style', oldProps.style, newProps.style, namespace)
      }
      // 按需更新动态props
      if (patchFlag & PatchFlags.PROPS) {
        const propsToUpdate = n2.dynamicProps!
        for (let i = 0; i < propsToUpdate.length; i++) {
          const key = propsToUpdate[i]
          const prev = oldProps[key]
          const next = newProps[key]
          if (next !== prev || key === 'value') {
            hostPatchProp(el, key, prev, next, namespace, parentComponent)
          }
        }
      }
    }
  }

  // 6. 调用updated钩子
  if ((dirs)) {
    queuePostRenderEffect(() => {
      dirs && invokeDirectiveHook(n2, n1, parentComponent, 'updated')
    }, parentSuspense)
  }
}

整体流程

复用并更新DOM元素引用
处理子节点更新
处理属性更新
触发更新后的钩子函数

详细分析

1. 复用DOM元素

const el = (n2.el = n1.el!)

这是Vue更新策略的核心之一：尽可能复用已有的DOM元素。这样可以：

避免不必要的DOM创建和销毁
保持元素的状态（如focus、scroll位置等）
提高更新性能

2. 子节点更新策略

if (dynamicChildren) {
  patchBlockChildren(
    n1.dynamicChildren!,
    dynamicChildren,
    el,
    parentComponent,
    parentSuspense,
    resolveChildrenNamespace(n2, namespace),
    slotScopeIds,
  )
} else if (!optimized) {
  patchChildren(
    n1,
    n2,
    el,
    null,
    parentComponent,
    parentSuspense,
    resolveChildrenNamespace(n2, namespace),
    slotScopeIds,
    false,
  )
}

Vue提供了两种子节点更新策略：

Block树更新（优化模式）：
- 只更新动态子节点
- 跳过静态内容
- 性能更好，适用于编译优化的情况
完整的子节点diff：
- 对所有子节点进行比较
- 使用传统的diff算法
- 更通用，但性能较差

3. 属性更新优化

if (patchFlag > 0) {
  if (patchFlag & PatchFlags.FULL_PROPS) {
    patchProps(el, oldProps, newProps, parentComponent, namespace)
  } else {
    // 按需更新class
    if (patchFlag & PatchFlags.CLASS) {
      if (oldProps.class !== newProps.class) {
        hostPatchProp(el, 'class', null, newProps.class, namespace)
      }
    }
    // 按需更新style
    if (patchFlag & PatchFlags.STYLE) {
      hostPatchProp(el, 'style', oldProps.style, newProps.style, namespace)
    }
    // 按需更新动态props
    if (patchFlag & PatchFlags.PROPS) {
      const propsToUpdate = n2.dynamicProps!
      for (let i = 0; i < propsToUpdate.length; i++) {
        const key = propsToUpdate[i]
        const prev = oldProps[key]
        const next = newProps[key]
        if (next !== prev || key === 'value') {
          hostPatchProp(el, key, prev, next, namespace, parentComponent)
        }
      }
    }
  }
}

Vue的属性更新使用了标记优化（patchFlag）：

完整props更新：
- 当props可能有动态键时
- 需要完整的props比较
优化更新：
- CLASS：只更新class属性
- STYLE：只更新style属性
- PROPS：只更新动态绑定的属性

这种优化机制使得Vue能够：

跳过静态内容的更新
只关注动态绑定的属性
根据不同的更新类型采用不同的处理策略

总结

通过分析processElement及其相关函数的实现，我们可以看到Vue在处理DOM元素时的几个关键特点：

分情况处理：
- 首次创建时调用mountElement
- 更新已有元素时调用patchElement
优化策略：
- 使用patchFlag标记动态内容
- 针对不同类型的更新采用不同的优化策略
- 复用已有DOM节点，只更新必要的部分
特殊处理：
- 对svg和mathml提供特殊的命名空间支持
- value属性的特殊处理
- 指令的处理

在下一篇文章中，我们将深入分析子节点的更新过程，包括patchChildren和patchBlockChildren的实现。