剖析 Vue 3 渲染器中处理文本节点、元素节点和组件节点更新的源码逻辑。

各位靓仔靓女，大家好！我是你们的“码上飞”老师，今天咱们来聊聊 Vue 3 渲染器里的“三驾马车”：文本节点、元素节点和组件节点的更新逻辑。准备好了吗？系好安全带，发车啦！

Part 1: 渲染器的基本概念和入口

在深入细节之前，先简单回顾一下渲染器的职责。渲染器，顾名思义，负责把虚拟 DOM（VNode）变成真实 DOM，并高效地更新它们。Vue 3 采用了基于 Patching 的更新策略，这意味着它只会更新 VNode 树中发生变化的部分，而不是整个 DOM 树。

渲染器的入口通常是 render 函数。这个函数接收两个参数：一个是 VNode，一个是 DOM 容器。

// 伪代码，简化版
function render(vnode: VNode, container: HTMLElement) {
  patch(null, vnode, container); // 第一次渲染，oldVNode 为 null
}

这里的 patch 函数是整个更新过程的核心。它负责比较新旧 VNode，并根据差异执行相应的 DOM 操作。

Part 2: Patch 函数的舞台：新旧 VNode 的“爱恨情仇”

patch 函数是整个更新流程的灵魂人物，它接收四个参数：

• n1: 旧 VNode (oldVNode)
• n2: 新 VNode (newVNode)
• container: 挂载容器
• anchor: 可选，插入位置的参考节点

patch 函数的核心逻辑可以用一个大的 if-else 语句来概括：

function patch(n1: VNode | null, n2: VNode, container: RendererElement, anchor: RendererNode | null = null) {
  // 1. 判断 VNode 类型
  const { type } = n2;

  switch (type) {
    case Text:
      processText(n1, n2, container, anchor);
      break;
    case Element:
      processElement(n1, n2, container, anchor);
      break;
    case Fragment:
      processFragment(n1, n2, container, anchor);
      break;
    default:
      if (isObject(type)) { // 组件
        processComponent(n1, n2, container, anchor);
      } else {
        // ... 其他类型的 VNode 处理逻辑，例如 Portal, Suspense 等
      }
  }
}

可以看到，patch 函数根据 VNode 的 type 属性，将更新逻辑分发到不同的处理函数中：processText、processElement 和 processComponent。这就是我们今天的主角！

Part 3: 文本节点更新：简单粗暴的“换汤不换药”

文本节点的更新相对简单，因为它们只包含文本内容。processText 函数的逻辑如下：

function processText(n1: VNode | null, n2: VNode, container: RendererElement, anchor: RendererNode | null) {
  if (n1 == null) {
    // 首次渲染，创建文本节点
    hostInsert(
      (n2.el = hostCreateText(n2.children as string)),
      container,
      anchor
    );
  } else {
    // 更新文本节点
    const el = (n2.el = n1.el!); // 复用旧的 DOM 节点
    if (n1.children !== n2.children) {
      hostSetTextContent(el, n2.children as string); // 设置文本内容
    }
  }
}

• 首次渲染： n1 为 null，创建一个新的文本节点，并插入到容器中。
• 更新： 复用旧的文本节点，如果新旧文本内容不同，则更新文本内容。

这里用到了 hostCreateText、hostInsert 和 hostSetTextContent 这些函数。它们是平台相关的 API，例如在浏览器环境中，它们分别是 document.createTextNode、parentElement.insertBefore 和 node.textContent = ...。Vue 3 通过这种方式实现了跨平台渲染。

举个栗子：

<template>
  <div>{{ message }}</div>
</template>

<script setup>
import { ref } from 'vue';
const message = ref('Hello, world!');

setTimeout(() => {
  message.value = 'Hello, Vue 3!';
}, 2000);
</script>

在这个例子中，message 的值发生变化时，Vue 3 会调用 processText 函数来更新文本节点的内容。

Part 4: 元素节点更新：精打细算的“外科手术”

元素节点的更新稍微复杂一些，因为它们可能包含属性、事件监听器和子节点。processElement 函数的逻辑如下：

function processElement(n1: VNode | null, n2: VNode, container: RendererElement, anchor: RendererNode | null) {
  if (n1 == null) {
    // 首次渲染，挂载元素
    mountElement(n2, container, anchor);
  } else {
    // 更新元素
    patchElement(n1, n2, container, anchor);
  }
}

可以看到，processElement 函数将首次渲染和更新的逻辑分成了 mountElement 和 patchElement 两个函数。

4.1 挂载元素：mountElement 函数

mountElement 函数负责创建元素节点，设置属性和事件监听器，以及挂载子节点。

function mountElement(vnode: VNode, container: RendererElement, anchor: RendererNode | null) {
  const { type, props, children, shapeFlag } = vnode;
  const el = (vnode.el = hostCreateElement(type as string)); // 创建元素节点

  // 设置属性
  if (props) {
    for (const key in props) {
      const nextVal = props[key];
      hostPatchProp(el, key, null, nextVal); // 设置属性
    }
  }

  // 处理子节点
  if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
    // 文本子节点
    hostSetElementText(el, children as string);
  } else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
    // 数组子节点
    mountChildren(children as VNode[], el, anchor);
  }

  hostInsert(el, container, anchor); // 插入到容器中
}

• 创建元素节点： 使用 hostCreateElement 创建元素节点。
• 设置属性： 遍历 props 对象，使用 hostPatchProp 设置属性。hostPatchProp 负责处理不同类型的属性，例如普通属性、事件监听器和 DOM 属性。
• 处理子节点： 根据 shapeFlag 判断子节点类型，如果是文本子节点，则使用 hostSetElementText 设置文本内容；如果是数组子节点，则调用 mountChildren 递归挂载子节点。
• 插入到容器中： 使用 hostInsert 将元素节点插入到容器中。

4.2 更新元素：patchElement 函数

patchElement 函数负责比较新旧 VNode 的差异，并更新 DOM 节点。

function patchElement(n1: VNode, n2: VNode, container: RendererElement, anchor: RendererNode | null) {
  const el = (n2.el = n1.el!); // 复用旧的 DOM 节点

  const oldProps = n1.props || {};
  const newProps = n2.props || {};

  patchChildren(n1, n2, el, anchor); // 更新子节点
  patchProps(el, newProps, oldProps); // 更新属性
}

• 复用 DOM 节点： 复用旧的 DOM 节点，并将其赋值给新 VNode 的 el 属性。
• 更新子节点： 调用 patchChildren 函数更新子节点。
• 更新属性： 调用 patchProps 函数更新属性。

4.2.1 更新属性：patchProps 函数

patchProps 函数负责比较新旧属性，并更新 DOM 节点的属性。

function patchProps(el: RendererElement, newProps: Data, oldProps: Data) {
  // 1. 处理新属性
  for (const key in newProps) {
    const nextVal = newProps[key];
    const prevVal = oldProps[key];
    if (nextVal !== prevVal) {
      hostPatchProp(el, key, prevVal, nextVal); // 更新属性
    }
  }

  // 2. 处理旧属性
  for (const key in oldProps) {
    if (!(key in newProps)) {
      hostPatchProp(el, key, oldProps[key], null); // 移除属性
    }
  }
}

• 处理新属性： 遍历新属性对象，如果新属性的值与旧属性的值不同，则调用 hostPatchProp 更新属性。
• 处理旧属性： 遍历旧属性对象，如果旧属性在新属性对象中不存在，则调用 hostPatchProp 移除属性。

4.2.2 更新子节点：patchChildren 函数

patchChildren 函数是元素节点更新中最复杂的部分，它负责比较新旧子节点，并执行相应的 DOM 操作。

function patchChildren(n1: VNode, n2: VNode, container: RendererElement, anchor: RendererNode | null) {
  const c1 = n1.children;
  const c2 = n2.children;

  const prevShapeFlag = n1.shapeFlag;
  const nextShapeFlag = n2.shapeFlag;

  // 1. 新的是文本节点
  if (nextShapeFlag & ShapeFlags.TEXT_CHILDREN) {
    // ...
  }
  // 2. 旧的是数组，新的是数组
  else if (prevShapeFlag & ShapeFlags.ARRAY_CHILDREN && nextShapeFlag & ShapeFlags.ARRAY_CHILDREN) {
    patchKeyedChildren(c1 as VNode[], c2 as VNode[], container, anchor);
  }
  // 3. 旧的是文本，新的是数组
  // 4. 旧的是数组，新的是文本
  // 5. 旧的是空，新的是数组
  // 6. 旧的是数组，新的是空
  // ... 其他情况的处理
}

patchChildren 函数根据新旧子节点的类型，将更新逻辑分发到不同的处理函数中。其中最复杂的是 patchKeyedChildren 函数，它负责处理带有 key 属性的子节点列表的更新。

4.2.3 patchKeyedChildren 函数：Diff 算法的精髓

patchKeyedChildren 函数实现了 Vue 3 的 Diff 算法，它可以高效地更新带有 key 属性的子节点列表。Diff 算法的目标是找到新旧子节点列表之间的最小操作序列，以尽可能减少 DOM 操作。

patchKeyedChildren 函数的逻辑比较复杂，涉及到头尾指针的移动、新旧节点的比较和插入、删除、移动等操作。这里就不展开详细讲解了，有兴趣的同学可以参考 Vue 3 的源码。

举个栗子：

<template>
  <div :class="{ active: isActive }">
    <p>{{ message }}</p>
    <button @click="toggleActive">Toggle Active</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isActive = ref(false);
const message = ref('Hello');

const toggleActive = () => {
  isActive.value = !isActive.value;
};

setTimeout(() => {
    message.value = 'Hello Vue3';
}, 3000)
</script>

在这个例子中，当 isActive 的值发生变化时，Vue 3 会调用 patchElement 函数来更新 div 元素的 class 属性。当 message 的值发生变化时，Vue 3 会调用 patchElement 继而调用 patchChildren 函数， patchChildren判断是文本更新，最终调用 processText 函数来更新 p 元素的文本内容。

Part 5: 组件节点更新：层层递进的“套娃游戏”

组件节点的更新是 Vue 3 渲染器中最复杂的部分，因为它涉及到组件的生命周期、props 的更新和重新渲染。processComponent 函数的逻辑如下：

function processComponent(n1: VNode | null, n2: VNode, container: RendererElement, anchor: RendererNode | null) {
  if (n1 == null) {
    // 首次渲染，挂载组件
    mountComponent(n2, container, anchor);
  } else {
    // 更新组件
    updateComponent(n1, n2, container, anchor);
  }
}

可以看到，processComponent 函数将首次渲染和更新的逻辑分成了 mountComponent 和 updateComponent 两个函数。

5.1 挂载组件：mountComponent 函数

mountComponent 函数负责创建组件实例，执行组件的生命周期钩子，并渲染组件的 VNode。

function mountComponent(initialVNode: VNode, container: RendererElement, anchor: RendererNode | null) {
  // 1. 创建组件实例
  const instance = (initialVNode.component = createComponentInstance(initialVNode));

  // 2. 设置组件实例
  setupComponent(instance);

  // 3. 设置渲染 effect
  setupRenderEffect(instance, initialVNode, container, anchor);
}

• 创建组件实例： 使用 createComponentInstance 创建组件实例。
• 设置组件实例： 使用 setupComponent 设置组件实例，包括解析 props、emit 等。
• 设置渲染 effect： 使用 setupRenderEffect 设置渲染 effect，渲染 effect 是一个响应式的副作用，它会在组件的数据发生变化时自动重新渲染组件。

5.2 更新组件：updateComponent 函数

updateComponent 函数负责更新组件实例，执行组件的生命周期钩子，并重新渲染组件的 VNode。

function updateComponent(n1: VNode, n2: VNode, container: RendererElement, anchor: RendererNode | null) {
  const instance = (n2.component = n1.component!);
  const { props } = instance;

  // 1. 更新 props
  if (hasPropsChanged(n1, n2)) {
    const nextProps = n2.props || {};
    const prevProps = n1.props || {};

    updateProps(props, nextProps, prevProps); // 更新 props
  }

  // 2. 更新渲染 effect
  const { next, vnode } = instance;
    next.el = vnode.el;

    updateComponentPreRender(instance, next); // 更新 beforeUpdate 生命周期

    const nextTree = instance.render.call(instance.proxy, instance.proxy); // 重新渲染
    patch(vnode, nextTree, container, anchor); // 更新 VNode 树

    next.vnode = nextTree; // 更新 VNode
}

• 更新 props： 如果 props 发生了变化，则调用 updateProps 函数更新 props。
• 更新渲染 effect： 重新执行组件的渲染函数，生成新的 VNode 树，然后调用 patch 函数更新 VNode 树。

举个栗子：

// ParentComponent.vue
<template>
  <div>
    <ChildComponent :message="parentMessage" />
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const parentMessage = ref('Hello from Parent');

const updateMessage = () => {
  parentMessage.value = 'New message from Parent';
};
</script>

// ChildComponent.vue
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

defineProps({
  message: {
    type: String,
    required: true,
  },
});
</script>

在这个例子中，当 parentMessage 的值发生变化时，Vue 3 会调用 updateComponent 函数来更新 ParentComponent 组件。updateComponent 函数会检测到 ChildComponent 的 message prop 发生了变化，然后调用 updateProps 函数更新 ChildComponent 组件的 message prop。最后，ChildComponent 组件会重新渲染，显示新的 message 值。

总结：

节点类型	更新逻辑	核心函数
文本节点	1. 首次渲染：创建文本节点并插入到容器中。 2. 更新：复用旧的文本节点，如果文本内容不同，则更新文本内容。	processText, hostCreateText, hostInsert, hostSetTextContent
元素节点	1. 首次渲染：创建元素节点，设置属性和事件监听器，挂载子节点，插入到容器中。 2. 更新：复用旧的元素节点，更新属性，更新子节点。	processElement, mountElement, patchElement, patchProps, patchChildren, patchKeyedChildren, hostCreateElement, hostPatchProp, hostInsert, hostSetElementText
组件节点	1. 首次渲染：创建组件实例，设置组件实例，设置渲染 effect。 2. 更新：更新 props，更新渲染 effect，重新渲染组件的 VNode 树。	processComponent, mountComponent, updateComponent, createComponentInstance, setupComponent, setupRenderEffect, updateProps

好了，今天的“Vue 3 渲染器三驾马车”之旅就到这里了。希望通过这次讲座，大家对 Vue 3 渲染器的更新逻辑有了更深入的理解。记住，源码虐我千百遍，我待源码如初恋！ 咱们下期再见！