vue3 源码解析（5）— patch 函数源码的实现_vue3 patch

什么是 patch

在 vue 中 patch 函数的作用是在渲染的过程中，比较新旧节点的变化，通过打补丁的形式，进行新增、删除、移动或替换操作，此过程避免了大量的 dom 操作，提升了运行的性能。

patch 执行流程

patch 函数整体流程比较长，函数内部包含很多分支用于处理不同的节点（Text、ELEMENT、COMPONENT）。

为了便于理解，文章中的代码皆为简化之后的代码：

/**
 * 
 * @param n1 上一次渲染的 vnode
 * @param n2 当前需要渲染的 vnode
 * @param container 容器
 * @param anchor 锚点, 用来标记插入的位置
 * @returns 
 */
const patch = (n1, n2, container, anchor = null) => {
  // 没变化不用对比，跳过此处节点
  if (n1 === n2) {
    return
  }

  // 如果type以及key值不一样，则删除此就节点
  if (n1 && !isSameVNodeType(n1, n2)) {
    const parent = n1.el.parentNode
    if (parent) {
      parent.removeChild(n1.el) // 删除元素
    }
    n1 = null // 删除之后重新加载
  }

  // 通过节点的shapeFlag（描述该组件的类型）进行不同处理
  const { shapeFlag, type } = n2
  if (type === Text) { // 文本
    console.log('文本')
    processText(n1, n2, container)
  } else if (shapeFlag & ShapeFlags.ELEMENT) { // 元素
    console.log('元素')
    processElement(n1, n2, container, anchor)
  } else if (shapeFlag & ShapeFlags.STATEFUL_COMPONENT) { // 组件
    console.log('组件')
    processComponent(n1, n2, container)
  }
}

// 对比新旧的type值以及key值
const isSameVNodeType = (n1, n2) => {
  return n1.type === n2.type && n1.key === n2.key
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

processText

processText 函数用于处理文本节点的更新。

函数根据新旧 vnode 节点的情况，创建新的文本节点或更新现有的文本节点的内容，以确保文本内容正确地显示在 DOM 中。

const processText = (n1, n2, container) => {
  const textNode = document.createTextNode(n2.children)
  // 旧的 vnode 节点不存在
  if (n1 == null) {
    // 创建文本节点并将内容设置为新节点的文本内容
    insert(createText(n2.children), container)
  } else {
    // 更新现有的文本节点的内容
    n1.el.textContent = textNode
  }
}
1
2
3
4
5
6
7
8
9
10
11

processElement

processElement 函数用于处理元素节点的更新。

函数根据新旧 vnode 节点的差异，对元素节点进行更新，并处理元素节点的属性、样式、事件等方面的变化。

const processElement = (n1, n2, container, anchor) => {
  if (n1 == null) { // 旧的 vnode 节点不存在
    // 创建新的元素节点
    mountElement(n2, container, anchor)
  } else { // 更新现有的元素节点
    console.log('同一元素的比对')
    patchElement(n1, n2, container, anchor)
  }
}
1
2
3
4
5
6
7
8
9

mountElement

mountElement 用于挂载新的元素节点到 DOM 中。

const mountElement = (vnode, container, anchor) => {
  const { type, props, shapeFlag, children } = vnode
  // 创建一个新的元素节点 el，并将其设置为 vnode节点的 el 属性，便于在后续的更新中可以引用到该元素节点
  const el = vnode.el = document.createElement(type)
  if (props) { // 添加属性
    // 遍历设置元素节点的属性
    for (const key in props) {
      el.setAttribute(key, props[key])
    }
  }
  // 处理children
  if (children) {
    if (shapeFlag & ShapeFlags.TEXT_CHILDREN) { // 子组件是纯文本
      // 创建文本元素
      setElementText(el, children)
    } else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) { // 子组件是数组列表
      // 递归挂载子节点
      mountChildren(el, children)
    }
  }
  // 将元素节点挂载到容器中
  container.insertBefore(el, anchor || null)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

mountChildren

mountChildren 函数的作用是将一组子节点挂载到指定的父节点中。

const mountChildren = (el, children) => {
  for (let i = 0; i < children.length; i++) {
    const child = normalizeVNode(children[i]) // 对当前子节点进行规范化处理，确保它是一个虚拟节点对象  
    patch(null, child, el) // 因为旧的节点为null（表示之前没有任何节点），所以会直接创建并挂载新的子节点到 el 中
  }
}

// 规范化虚拟节点，确保它们都是预期的对象格式
const normalizeVNode = (child) => {
  if (isObject(child)) { // 已经是一个规范的 vnode
    return child
  } else {
    return createVNode(Text, null, String(child)) // 创建一个文本类型的 vnode
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

patchElement

patchElement 用于更新已存在的元素节点。

函数的作用是根据新旧 vnode 节点的差异，对已存在的元素节点进行更新。

const patchElement = (n1, n2, container, anchor) => {
  const el = (n2.el = n1.el) // 获取真实节点
  const oldProps = n1.props || {}
  const newProps = n2.props || {}
  for (const key in newProps) {
    const oldValue = oldProps[key]
    const newValue = newProps[key]
    if (oldValue !== newValue) {
      el.setAttribute(key, newValue)
    }
  }
  // 比对children
  patchChildren(n1, n2, el)
}

const patchChildren = (n1, n2, el) => {
  const c1 = n1.children
  const c2 = n2.children
  const prevShapeFlag = n1.shapeFlag
  const nextShapeFlag = n2.shapeFlag
  if (nextShapeFlag & ShapeFlags.TEXT_CHILDREN) { // 文本类型
    // 直接设置元素的文本内容为新的子节点内容
    setElementText(el, c2)
  } else {
    if (prevShapeFlag & ShapeFlags.ARRAY_CHILDREN) { // 新旧子节点都是数组
      patchKeyedChildren(c1, c2, el) // diff算法 使用双指针策略来更新子节点
    } else { // 如果旧的子节点是文本，但新的子节点是一个数组
      setElementText(el, '') // 首先，清空旧元素的文本内容 
      mountChildren(el, c2) // 然后，挂载新的子节点到DOM元素上
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

这里的 patchKeyedChildren 是 patch 函数最为重要的内容。函数内部实现了核心的 diff 算法，在后面的文章中会重点介绍。

processComponent

processComponent 用于处理组件类型的虚拟 DOM 节点。

函数的作用是处理组件类型的虚拟 DOM 节点，包括创建组件实例、挂载组件、更新组件等操作。

const processComponent = (n1, n2, container) => {
  if (n1 === null) { // 首次挂载
    mountComponent(n2, container)
  } else { // 更新
    updateComponent(n1, n2, container)
  }
}
1
2
3
4
5
6
7

mountComponent

mountComponent 函数用于挂载组件类型的虚拟 DOM 节点。

函数的作用是创建组件实例、解析组件实例对象并设置渲染效果。

// 组件挂载
const mountComponent = (initialVNode, container) => {
  const instance = initialVNode.component = createComponentInstance(
    initialVNode) // 初始化一个组件的实例对象
  setupComponent(instance) // 解析组件的实例对象
  setupRenderEffect(instance, container) // 创建一个effect
}
1
2
3
4
5
6
7

• createComponentInstance: 初始化一个组件的实例对象，添加相关属性（vnode、type、props、attrs、ctx、proxy）。

• setupComponent: 函数来解析组件的实例对象。这个函数会处理组件的 props、slots、attrs 等属性，并设置响应式数据等。它会在组件实例上创建一些与组件相关的属性和方法。

• setupRenderEffect: 创建一个 effect，用于在组件状态变化时触发重新渲染。该 effect 依赖于组件实例的响应式数据。当响应式数据发生变化时，会触发该 effect，进而调用组件实例的 render 方法重新渲染组件，并将渲染结果插入到 container 容器中。

updateComponent

updateComponent 函数用于更新组件类型的虚拟 DOM 节点。

函数根据新旧节点的变化情况，更新组件的状态和属性，并触发组件的生命周期钩子函数。通过更新组件的 props、slots 等属性，执行 beforeUpdate 生命周期钩子函数。执行组件的更新操作，最后执行 updated 生命周期钩子函数，完成了组件的更新过程。

function updateComponent(n1, n2, container) {
  const instance = n2.component = n1.component // 组件实例引用进行传递，确保组件实例的一致性
  if (shouldUpdateComponent(n1, n2)) { // 判断是否需要更新组件
    // 更新组件的 props、slots 等属性
    instance.props = n2.props
    instance.slots = n2.slots
    // 触发 beforeUpdate 生命周期钩子函数
    callBeforeUpdateHooks(instance)
    // 执行组件的更新操作
    instance.update()
    // 触发 updated 生命周期钩子函数
    callUpdatedHooks(instance)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

• shouldUpdateComponent: 函数判断是否需要更新组件。该函数会比较新旧节点的属性、事件等是否发生了变化，以确定是否需要进行组件的更新操作。如果判断为需要更新组件，则执行下面的操作；否则，不进行任何更新操作。

• callBeforeUpdateHooks: 函数触发组件的 beforeUpdate 生命周期钩子函数。该函数会在组件更新之前执行一些预处理或清理操作。

• update: 执行组件的更新操作，包括重新渲染组件。

• callUpdatedHooks: 函数触发组件的 updated 生命周期钩子函数。该函数会在组件更新完成后执行一些操作，如更新后的 DOM 操作、发送请求等。

总结

为了便于理解我把以上代码流程流程图的形式展示出来了，希望通过本篇文章可以帮助读者更好的了解 vue 的渲染过程。