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

各位观众，大家好！我是今天的主讲人，咱们今天要聊聊Vue 3渲染器里两位重量级选手：mountComponent和patch。这俩哥们儿可是Vue 3组件渲染的核心，一个负责首次登场，一个负责日常维护，配合得那叫一个天衣无缝。今天咱们就深入扒一扒，看看它们到底是怎么协同工作的。

开场白：组件渲染的舞台

在深入之前，咱们先简单回顾一下Vue 3组件渲染的大致流程。简单来说，就是把组件的虚拟DOM（VNode）转化成真实的DOM，并挂载到页面上。这个过程可以分为两个主要阶段：

1. 首次渲染（Mount）: 组件第一次出现在页面上，需要创建真实的DOM，并插入到指定的位置。
2. 更新（Patch）: 组件的数据发生变化，需要更新DOM，以反映最新的数据。

而mountComponent和patch，就是这两个阶段的主角。mountComponent负责首次渲染，patch负责更新。

第一幕：mountComponent——组件的华丽登场

mountComponent函数的作用是首次挂载一个组件。它的主要工作包括：

• 创建组件实例
• 设置渲染上下文
• 执行组件的setup函数（如果存在）
• 创建组件的渲染函数
• 创建组件的 effect
• 首次执行渲染函数，生成VNode
• 将VNode交给patch函数处理，生成真实DOM并挂载

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

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

  // 2. 设置渲染上下文
  setupComponent(instance);

  // 3. 执行组件的 setup 函数 (如果存在)
  setupRenderEffect(instance, vnode, container, anchor, anchor2);
}

function createComponentInstance(vnode, parent) {
  const type = vnode.type;
  const instance = {
    uid: uid++,
    vnode,
    type,
    appContext: parent ? parent.appContext : {},
    parent,
    isMounted: false,
    next: null, // 用于更新
    subTree: null, // 组件渲染的 VNode 树
    effect: null, // 用于渲染的 effect
    update: null, // 用于更新的函数
    provides: parent ? parent.provides : Object.create(parent.appContext.provides),
    proxy: null, // 组件的 proxy 对象
    exposed: null,
    exposeProxy: null,
    isSuspended: false,
    suspense: null,
    asyncDep: null,
    asyncResolved: false,
    emit: null,
    emitted: null,
    render: null,
    renderCache: [],
    data: {},
    props: {},
    attrs: {},
    slots: {},
    refs: {},
    provides: Object.create(null),
    accessCache: null,
    components: null,
    directives: null,
    propsProxy: null,
    ctx: {},
    inheritAttrs: type.inheritAttrs,
  };
  instance.emit = emit.bind(null, instance);
  return instance;
}

function setupComponent(instance) {
    const Component = instance.type;
    let { setup } = Component;
    if (setup) {
      //setCurrentInstance(instance)
      const setupResult = setup(instance.props, {
        emit: instance.emit,
        attrs: instance.attrs,
        slots: instance.slots,
        expose: (exposed) => {
          instance.exposed = exposed || {};
        }
      });
      //setCurrentInstance(null)

      if (typeof setupResult === 'function') {
        // setup 返回的是渲染函数
        instance.render = setupResult;
      } else if (typeof setupResult === 'object') {
        // setup 返回的是 data
        instance.setupState = setupResult;
      }
    }

    if (!instance.render) {
      // 如果没有 render 函数，则使用 template
      instance.render = Component.render || compile(Component.template)
    }
}

function setupRenderEffect(instance, initialVNode, container, anchor, anchor2) {
  const componentUpdateFn = () => {
    if (!instance.isMounted) {
      // 首次渲染
      let { next, vnode } = instance
      if (next) {
        vnode = next
        instance.vnode = next
        instance.next = null
      }
      const subTree = instance.render.call(instance.proxy, instance.proxy);
      // 存储组件的 vnode 树
      instance.subTree = subTree;
      // 调用 patch 方法 初始化渲染
      patch(null, subTree, container, anchor, instance, anchor2)
      // 将 isMounted 设置为 true
      initialVNode.el = subTree.el
      instance.isMounted = true
    } else {
      // 更新
       let { next, vnode } = instance
        if (next) {
          vnode = next
          instance.vnode = next
          instance.next = null
        }
      const nextTree = instance.render.call(instance.proxy, instance.proxy);
      const prevTree = instance.subTree;
      instance.subTree = nextTree;
      patch(prevTree, nextTree, container, anchor, instance, anchor2);
    }
  }

  // 创建一个 effect，当响应式数据变化时，会自动执行 componentUpdateFn
  const effect = new ReactiveEffect(componentUpdateFn, () => queueJob(instance.update));
  const update = (instance.update = effect.run.bind(effect));
  effect.run()
}

咱们来逐行解读一下：

• createComponentInstance: 这个函数创建组件实例，它包含了组件的所有状态，例如props、data、methods等。同时它也为组件设置了各种属性，比如isMounted（是否已挂载）、subTree（组件的VNode树）等。
• setupComponent: 这个函数主要负责处理组件的setup选项。如果组件定义了setup函数，就执行它，并根据setup函数的返回值来确定组件的渲染函数。如果setup返回的是一个函数，那么这个函数就作为组件的渲染函数；如果setup返回的是一个对象，那么这个对象会被合并到组件的上下文中。
• setupRenderEffect: 这是整个mountComponent的核心部分。它创建了一个ReactiveEffect，这个Effect会在组件的数据发生变化时自动执行。在首次渲染时，setupRenderEffect会调用组件的渲染函数，生成组件的VNode树，然后将VNode树交给patch函数处理，生成真实的DOM并挂载。

重点：ReactiveEffect

ReactiveEffect是Vue 3响应式系统的核心。它允许我们在数据发生变化时自动执行某些操作。在mountComponent中，我们使用ReactiveEffect来包装组件的渲染函数，这样，当组件的数据发生变化时，渲染函数就会自动执行，从而更新DOM。

第二幕：patch——DOM的精细化更新

patch函数是Vue 3渲染器中最复杂的函数之一。它的作用是比较新旧两个VNode，并根据比较结果来更新DOM。patch函数支持多种VNode类型，例如：

• 元素节点: 比较标签名、属性、子节点等。
• 文本节点: 比较文本内容。
• 组件节点: 递归调用patch函数来更新组件。

咱们也来一段伪代码，模拟一下patch的流程：

function patch(n1, n2, container, anchor, parentComponent, anchor2) {
  // 判断 n1 是否存在，如果不存在，说明是 mount 阶段
  if (!n1) {
    // 调用 mountElement 方法初始化渲染
    mountComponent(n2, container, anchor, parentComponent, anchor2);
  } else {
    // n1 存在，说明是 update 阶段
    // 判断 n1 和 n2 的类型是否相同
    if (n1.type !== n2.type) {
      // 如果类型不同，则直接替换
      unmount(n1);
      mountComponent(n2, container, anchor, parentComponent, anchor2);
    } else {
      // 如果类型相同，则进行 patch
      patchElement(n1, n2, container, anchor, parentComponent, anchor2);
    }
  }
}

function patchElement(n1, n2, container, anchor, parentComponent, anchor2) {
  // 1. 获取 el
  const el = (n2.el = n1.el);

  // 2. patch props
  const oldProps = n1.props || {};
  const newProps = n2.props || {};
  patchProps(el, newProps, oldProps);

  // 3. patch children
  const oldChildren = n1.children;
  const newChildren = n2.children;
  patchChildren(oldChildren, newChildren, el, anchor, parentComponent, anchor2);
}

function patchChildren(oldChildren, newChildren, container, anchor, parentComponent, anchor2) {
  // 判断 newChildren 和 oldChildren 的类型
  if (typeof newChildren === 'string') {
    // newChildren 是 string 类型
    if (typeof oldChildren === 'string') {
      // oldChildren 也是 string 类型
      // 直接更新文本内容
      if (newChildren !== oldChildren) {
        hostSetElementText(container, newChildren);
      }
    } else {
      // oldChildren 是 array 类型
      // 先清空 oldChildren，然后设置文本内容
      hostSetElementText(container, newChildren);
    }
  } else if (Array.isArray(newChildren)) {
    // newChildren 是 array 类型
    if (typeof oldChildren === 'string') {
      // oldChildren 是 string 类型
      // 先清空文本内容，然后挂载 newChildren
      hostSetElementText(container, '');
      mountChildren(newChildren, container, anchor, parentComponent, anchor2);
    } else {
      // oldChildren 也是 array 类型
      // Diff 算法
      patchKeyedChildren(oldChildren, newChildren, container, anchor, parentComponent, anchor2)
    }
  }
}

咱们来逐行解读一下：

• patch: 这是patch函数的入口。它首先判断是否存在旧的VNode（n1）。如果不存在，说明是首次渲染，直接调用mountElement或mountComponent来创建真实的DOM并挂载。如果存在，说明是更新，需要比较新旧两个VNode，并根据比较结果来更新DOM。
• patchElement: 这个函数负责更新元素节点的属性和子节点。它首先获取旧的DOM元素，然后比较新旧两个VNode的属性，并更新DOM元素的属性。接着，它比较新旧两个VNode的子节点，并递归调用patch函数来更新子节点。
• patchChildren: 这个函数负责更新子节点。它首先判断新旧子节点的类型，然后根据类型来更新子节点。如果新旧子节点都是文本节点，那么直接更新文本内容。如果新旧子节点都是数组，那么就使用Diff算法来比较新旧子节点，并更新DOM。

重点：Diff算法

patchChildren中提到的Diff算法是Vue 3性能优化的关键。Diff算法用于比较新旧两个子节点数组，并找出需要更新的节点。Vue 3使用了多种Diff算法，例如：

• 简单Diff: 比较新旧子节点数组的头部和尾部，如果头部或尾部相同，则直接移动或删除节点。
• Keyed Diff: 使用key来标识节点，如果key相同，则认为节点是相同的，可以进行更新。

通过使用Diff算法，Vue 3可以最大限度地减少DOM操作，从而提高性能。

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

现在，咱们来总结一下mountComponent和patch是如何协同工作的：

1. 首次渲染: 当组件第一次出现在页面上时，mountComponent函数会被调用。mountComponent函数会创建组件实例，执行组件的setup函数，创建组件的渲染函数，并首次执行渲染函数，生成VNode。然后，mountComponent函数会将VNode交给patch函数处理，生成真实DOM并挂载。
2. 更新: 当组件的数据发生变化时，patch函数会被调用。patch函数会比较新旧两个VNode，并根据比较结果来更新DOM。如果新旧VNode的类型不同，那么patch函数会直接替换旧的DOM元素。如果新旧VNode的类型相同，那么patch函数会更新DOM元素的属性和子节点。

可以用一个表格来清晰地展示：

阶段	函数	职责
首次渲染	mountComponent	1. 创建组件实例。 2. 执行setup函数。 3. 创建渲染函数。 4. 首次执行渲染函数，生成VNode。 5. 将VNode交给patch函数处理。
更新	patch	1. 比较新旧VNode。 2. 如果新旧VNode的类型不同，则直接替换旧的DOM元素。 3. 如果新旧VNode的类型相同，则更新DOM元素的属性和子节点。

总结：幕后英雄的默契配合

mountComponent和patch是Vue 3渲染器的两大核心函数。mountComponent负责组件的首次渲染，patch负责组件的更新。它们之间的默契配合，使得Vue 3可以高效地将组件的虚拟DOM转化成真实的DOM，并挂载到页面上。

理解了mountComponent和patch的执行流程，就等于理解了Vue 3组件渲染的核心机制。这对于我们深入理解Vue 3的内部原理，以及优化Vue 3应用的性能，都非常有帮助。

希望今天的讲解对大家有所帮助！谢谢大家！