深入分析 Vue 3 渲染器中 `renderer.mountComponent` 和 `renderer.patch` 的完整执行流程，它们如何协同完成组件的首次渲染和更新？

各位同学，大家好！今天咱们来聊聊 Vue 3 渲染器的两大核心函数：mountComponent 和 patch。这俩哥们儿，一个负责组件的“出生”（首次渲染），一个负责组件的“成长”（更新），配合得那叫一个天衣无缝。咱们就来扒一扒它们背后的运作机制，看看它们是如何协同完成组件从无到有，再到不断进化的过程。

开场白：渲染器的任务和目标

首先，咱们得明确渲染器的任务是什么。简单来说，渲染器的目标就是把我们的 Vue 组件（也就是那一堆模板、数据、逻辑）转换成浏览器能识别并显示的 DOM 元素。这个过程涉及到虚拟 DOM (Virtual DOM) 的创建、对比 (Diffing)、以及最终的 DOM 操作。

第一幕：mountComponent —— 组件的诞生

mountComponent 顾名思义，负责挂载组件。这个函数会在组件首次渲染时被调用，它的主要任务包括：

1. 创建组件实例 (Component Instance): 这是组件的“灵魂”。包含了组件的状态 (data)、计算属性 (computed)、方法 (methods) 等等。
2. 设置渲染上下文 (Rendering Context): 为组件的渲染过程准备好必要的上下文信息，例如 props、slots 等。
3. 调用 setup 函数 (setup function): 如果组件定义了 setup 函数，在这里会被执行。setup 函数返回的值会成为组件的渲染上下文的一部分。
4. 创建 effect 渲染函数 (render function): 核心！将组件的 render 函数包装成一个响应式的 effect。这意味着当组件依赖的数据发生变化时，render 函数会自动重新执行。
5. 首次执行 effect 渲染函数，生成 VNode (Virtual Node): render 函数执行后，会返回一个 VNode，描述了组件的结构。
6. 将 VNode 传递给 patch 函数，进行首次渲染 (initial render): 将 VNode 转换成真实的 DOM 元素，并挂载到页面上。

咱们来看一段简化的伪代码，模拟一下 mountComponent 的流程：

function mountComponent(vnode, container, anchor, parentComponent, anchor) {
  // 1. 创建组件实例
  const instance = createComponentInstance(vnode, parentComponent);

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

  // 3. 创建 effect 渲染函数
  const { render } = instance;
  const effect = new ReactiveEffect(() => {
    // 执行 render 函数，获取 VNode
    const subTree = render.call(instance.proxy, instance.proxy);

    // 调用 patch 函数，进行首次渲染
    patch(null, subTree, container, anchor, instance);

    // 更新 prevTree
    instance.prevTree = subTree;
  }, () => {
    // 更新调度器（scheduler），例如处理计算属性的缓存
  });

  // 4. 执行 effect 渲染函数
  effect.run();

  // 5. 触发 mounted 生命周期钩子
  onMounted(instance);
}

代码解读：

• createComponentInstance: 创建组件实例，包含各种属性和方法。
• setupComponent: 调用 setup 函数，处理 props，注入依赖等。
• ReactiveEffect: Vue 3 的响应式系统核心，将 render 函数包装成一个 effect，当依赖的数据变化时，effect 会重新执行。
• patch(null, subTree, container): 这是关键的一步，将 VNode 转换成 DOM 元素，并挂载到容器中。注意，这里第一个参数是 null，表示首次渲染，没有旧的 VNode 需要比较。
• onMounted: 在组件挂载完成后触发 mounted 生命周期钩子。

第二幕：patch —— 组件的更新与演变

patch 函数是 Vue 3 渲染器中最核心，也是最复杂的函数。它负责比较新旧 VNode，并根据差异更新 DOM 元素。patch 函数的功能可以概括为：

1. 判断 VNode 类型： 根据 VNode 的类型，采取不同的处理方式。例如，如果是组件 VNode，则递归调用 patch 函数处理子组件。如果是元素 VNode，则比较元素的属性、事件等。
2. 处理不同类型的更新：
   • 创建新的 DOM 元素： 如果旧的 VNode 不存在，则创建新的 DOM 元素并插入到页面中。
   • 更新 DOM 元素： 如果新旧 VNode 存在，并且是相同的类型，则比较它们的属性、事件等，并更新 DOM 元素。
   • 删除 DOM 元素： 如果旧的 VNode 存在，而新的 VNode 不存在，则删除 DOM 元素。
3. 处理子节点： 递归调用 patch 函数处理子节点，实现深度更新。

咱们来看一段简化的伪代码，模拟一下 patch 函数的流程：

function patch(n1, n2, container, anchor, parentComponent) {
  // 判断 VNode 类型
  const { type } = n2;

  switch (type) {
    case Text:
      // 处理文本节点
      processText(n1, n2, container, anchor);
      break;
    case Fragment:
      // 处理 Fragment 节点
      processFragment(n1, n2, container, anchor, parentComponent);
      break;
    case Comment:
      //处理注释节点
      processCommentNode(n1,n2,container,anchor);
      break;
    default:
      if (typeof type === 'string') {
        // 处理元素节点
        processElement(n1, n2, container, anchor, parentComponent);
      } else if (typeof type === 'object') {
        // 处理组件节点
        processComponent(n1, n2, container, anchor, parentComponent);
      } else {
        // 未知类型
        console.warn('Unknown VNode type:', type);
      }
  }
}

代码解读：

• n1: 旧的 VNode (old VNode)。
• n2: 新的 VNode (new VNode)。
• container: 挂载 DOM 元素的容器。
• anchor: 插入 DOM 元素的位置（参考节点）。
• parentComponent: 父组件实例。
• processText, processElement, processComponent: 这些函数分别处理不同类型的 VNode。

patch 函数的核心流程（以元素节点为例）：

function processElement(n1, n2, container, anchor, parentComponent) {
  if (n1 === null) {
    // 挂载新的元素
    mountElement(n2, container, anchor, parentComponent);
  } else {
    // 更新元素
    patchElement(n1, n2, parentComponent);
  }
}

function mountElement(vnode, container, anchor, parentComponent) {
  const { type, props, children } = vnode;

  // 1. 创建 DOM 元素
  const el = document.createElement(type);
  vnode.el = el; // 将 DOM 元素保存到 VNode 中

  // 2. 设置元素属性
  if (props) {
    for (const key in props) {
      const value = props[key];
      patchProps(el, key, null, value); // 设置属性
    }
  }

  // 3. 处理子节点
  if (Array.isArray(children)) {
    mountChildren(children, el, parentComponent);
  } else if (typeof children === 'string') {
    el.textContent = children;
  }

  // 4. 插入到容器中
  container.insertBefore(el, anchor || null);
}

function patchElement(n1, n2, parentComponent) {
  const el = (n2.el = n1.el); // 复用旧的 DOM 元素

  // 1. 比较属性
  const oldProps = n1.props || {};
  const newProps = n2.props || {};
  patchProps(el, newProps, oldProps);

  // 2. 比较子节点
  patchChildren(n1, n2, el, parentComponent);
}

function patchProps(el, key, prevValue, nextValue) {
  if (prevValue !== nextValue) {
    if (nextValue === null || nextValue === undefined) {
      // 删除属性
      el.removeAttribute(key);
    } else {
      // 设置属性
      el.setAttribute(key, nextValue);
    }
  }
}

function patchChildren(n1, n2, container, parentComponent) {
  const c1 = n1.children;
  const c2 = n2.children;

  // 1. 新旧子节点都是数组
  if (Array.isArray(c1) && Array.isArray(c2)) {
    patchKeyedChildren(c1, c2, container, parentComponent); // 使用 key 的高效 Diff 算法
  }
  // 2. 旧子节点是文本，新子节点是数组
  else if(typeof c1 === 'string' && Array.isArray(c2)){
      //先清空旧的文本节点，再挂载新的节点
      container.textContent = ''
      mountChildren(c2,container,parentComponent)
  }
  // 3. 新子节点是文本，旧子节点是数组
  else if(Array.isArray(c1) && typeof c2 === 'string'){
      // 卸载旧的节点，再挂载文本
      unmountChildren(c1,parentComponent)
      container.textContent = c2
  }

  // 4. 新旧子节点都是文本
  else {
    if (c1 !== c2) {
      container.textContent = c2; // 更新文本
    }
  }
}

代码解读：

• mountElement: 创建新的 DOM 元素，并设置属性和子节点。
• patchElement: 复用旧的 DOM 元素，并比较属性和子节点。
• patchProps: 比较元素的属性，并更新 DOM 元素。
• patchChildren: 比较元素的子节点，并递归调用 patch 函数。
• patchKeyedChildren: 这是 Vue 3 中最核心的 Diff 算法，用于比较带有 key 的子节点，可以高效地更新 DOM 元素。

第三幕：mountComponent 和 patch 的协同作战

现在，我们把 mountComponent 和 patch 放在一起，看看它们是如何协同完成组件的首次渲染和更新的。

首次渲染：

1. mountComponent 创建组件实例，并设置渲染上下文。
2. mountComponent 创建 effect 渲染函数，并首次执行。
3. render 函数返回 VNode。
4. patch(null, subTree, container) 将 VNode 转换成 DOM 元素，并挂载到页面上。

更新：

1. 组件依赖的数据发生变化，触发 effect 渲染函数重新执行。
2. render 函数返回新的 VNode。
3. patch(prevTree, subTree, container) 比较新旧 VNode，并更新 DOM 元素。

表格总结：

函数	职责	调用时机	参数	返回值
mountComponent	挂载组件，创建组件实例，设置渲染上下文，创建 effect 渲染函数，首次渲染。	组件首次渲染时	vnode, container, anchor, parentComponent	无
patch	比较新旧 VNode，并根据差异更新 DOM 元素。	首次渲染、组件更新时	n1 (old VNode), n2 (new VNode), container, anchor, parentComponent	无

重点总结：

• mountComponent 是组件的“出生”，负责创建组件实例和首次渲染。
• patch 是组件的“成长”，负责比较新旧 VNode，并根据差异更新 DOM 元素。
• ReactiveEffect 是 Vue 3 响应式系统的核心，将 render 函数包装成一个 effect，当依赖的数据变化时，effect 会重新执行。
• Vue 3 使用虚拟 DOM 和高效的 Diff 算法，可以高效地更新 DOM 元素。

结束语：

理解 mountComponent 和 patch 的运作机制，可以帮助我们更好地理解 Vue 3 的渲染原理，从而写出更高效、更健壮的 Vue 应用。希望今天的分享对大家有所帮助。下次有机会，咱们再深入探讨 Vue 3 的其他核心概念。

各位，下课！