深入分析 Vue 3 源码中 `createComponentInstance` 和 `setupComponent` 的详细执行流程，它们如何构建组件实例和初始化 `setup` 上下文。

各位观众老爷，晚上好！我是你们的老朋友，今天咱们来聊聊 Vue 3 源码里“生孩子”的两大关键函数：createComponentInstance 和 setupComponent。这俩家伙就像是 Vue 组件的“产房”和“育婴室”，负责把一个组件的蓝图变成活生生的实例，并准备好它所需的各种“营养”。

这次咱们要做的，就是扒开它们的源码，看看这俩函数是怎么配合，把一个组件从无到有地“生”出来的。为了让大家更容易理解，我会尽量用大白话解释，还会穿插一些代码片段，让大家看得更明白。准备好了吗？ Let’s go!

一、createComponentInstance：组件实例的“毛坯房”

首先，咱们来认识一下 createComponentInstance。顾名思义，这个函数的作用就是创建一个组件实例。但注意，这只是一个“毛坯房”，里面啥都没有，只有一些基本的属性。

// packages/runtime-core/src/component.ts

export function createComponentInstance(
  vnode: VNode,
  parent: ComponentInternalInstance | null,
  suspense: SuspenseBoundary | null
) {
  const type = vnode.type as Component
  //... 省略一些代码

  const instance: ComponentInternalInstance = {
    uid: uid++,
    vnode,
    type,
    parent,
    appContext: parent ? parent.appContext : vnode.appContext || emptyAppcCtx,
    root: null!,
    next: null,
    subTree: null!,
    effect: null!,
    update: null!,
    render: null!,
    proxy: null,
    exposed: null,
    exposeProxy: null,
    withProxy: null,
    provides: parent ? parent.provides : Object.create(null),
    accessCache: null!,
    renderCache: [],

    // state
    ctx: EMPTY_OBJ,
    data: EMPTY_OBJ,
    props: EMPTY_OBJ,
    attrs: EMPTY_OBJ,
    slots: EMPTY_OBJ,
    refs: EMPTY_OBJ,
    setupState: EMPTY_OBJ,
    setupContext: null,

    // lifecycle
    suspense,
    suspenseId: suspense ? suspense.id : 0,
    asyncDep: null,
    asyncResolved: false,
    isMounted: false,
    isUnmounted: false,
    isDeactivated: false,
    bc: null,
    c: null,
    bm: null,
    m: null,
    bu: null,
    u: null,
    um: null,
    da: null,
    a: null,
    rtg: null,
    rtc: null,
    ec: null,
    sp: null
  }

  instance.root = parent ? parent.root : instance

  // resolve props with current context
  if (vnode.props) {
    resolveProps(instance, type.props, vnode.props)
  }

  //... 省略一些代码
  return instance
}

咱们来解读一下这段代码：

vnode: 虚拟 DOM 节点，包含了组件的信息。就像是组件的“设计图纸”。
parent: 父组件实例。如果这个组件是根组件，那么 parent 就是 null。
instance: 组件实例对象。这就是咱们要创建的“毛坯房”。
uid: 组件的唯一 ID，用于区分不同的组件实例。
type: 组件的类型，通常是一个组件选项对象。
appContext: 应用上下文，包含了全局配置和插件等信息。
root: 根组件实例。
parent: 父组件实例，形成组件树。
provides: 用于依赖注入，允许组件向其子组件提供数据。
ctx: 组件的渲染上下文，包含了组件的所有数据和方法。
data: 组件的 data 选项返回的数据。
props: 组件接收的 props。
attrs: 组件接收的 HTML attributes，没有在 props 中声明的。
slots: 组件的插槽。
refs: 组件的 refs。
setupState: setup 函数返回的状态。
setupContext: 传递给 setup 函数的上下文对象。
isMounted: 组件是否已经挂载。
isUnmounted: 组件是否已经卸载。
resolveProps: 一个用于解析props的函数，将vnode中的props解析到instance的props中

简单来说，createComponentInstance 就是创建了一个包含各种属性的空对象，这个对象就是组件实例。它就像一个空壳子，等待着 setupComponent 来填充内容。

二、setupComponent：组件实例的“精装修”

接下来，咱们来聊聊 setupComponent。这个函数的作用就是对组件实例进行“精装修”，包括：

解析组件的 props、attrs 和 slots。
调用组件的 setup 函数（如果存在）。
设置组件的渲染函数。

// packages/runtime-core/src/component.ts

export function setupComponent(
  instance: ComponentInternalInstance,
  isSSR = false
) {
  const { props, children, shapeFlag } = instance.vnode
  const isStateful = shapeFlag & ShapeFlags.STATEFUL_COMPONENT

  initProps(instance, props, isStateful, isSSR)
  initSlots(instance, children)

  const { setup } = instance.type

  if (setup) {
    // setup context
    const setupContext = (instance.setupContext =
      isStateful ? createSetupContext(instance) : null)

    const setupResult = callWithErrorHandling(
      setup,
      instance,
      SetupRenderEffectErrorCode.SETUP_FUNCTION,
      [(__DEV__ ? shallowReadonly(instance.props) : instance.props), setupContext]
    )

    if (isPromise(setupResult)) {
        //... 处理异步setup
    } else {
      handleSetupResult(instance, setupResult, isSSR)
    }
  } else {
      finishComponentSetup(instance, isSSR)
  }
}

咱们来一步步分析这段代码：

initProps: 解析组件的 props，并将它们添加到组件实例的 props 对象中。还会处理 props 的类型校验和默认值。
initSlots: 解析组件的 slots，并将它们添加到组件实例的 slots 对象中。
setup: 判断组件是否定义了 setup 函数。如果定义了，就执行它。
setupContext: 创建 setup 函数的上下文对象。这个对象包含了 expose、emit 和 attrs 等属性。
callWithErrorHandling: 调用 setup 函数，并处理可能发生的错误。
handleSetupResult: 处理 setup 函数的返回值。如果返回值是一个函数，那么就把它作为组件的渲染函数。如果返回值是一个对象，那么就把它合并到组件实例的 setupState 对象中。
finishComponentSetup: 完成组件的setup，设置渲染函数。

现在，咱们来重点看看 setupContext 和 handleSetupResult 这两个关键部分。

三、setupContext：连接组件内外的桥梁

setupContext 是一个传递给 setup 函数的上下文对象，它允许 setup 函数访问组件的一些内部属性和方法。

// packages/runtime-core/src/component.ts

function createSetupContext(instance: ComponentInternalInstance): SetupContext {
  return {
    attrs: instance.attrs,
    slots: instance.slots,
    emit: instance.emit,
    expose: (exposed: Record<string, any> | null) => {
      if (__DEV__) {
        if (instance.exposed) {
          warn(`expose() should be called only once per setup().`)
        }
      }
      instance.exposed = exposed || {}
    }
  }
}

可以看到，setupContext 包含了以下属性：

attrs: 组件接收的 HTML attributes，没有在 props 中声明的。
slots: 组件的插槽。
emit: 一个函数，用于触发组件的自定义事件。
expose: 一个函数，用于显式地暴露组件的属性和方法给父组件。

通过 setupContext，setup 函数可以访问组件的外部数据（attrs 和 slots），也可以与父组件进行通信（emit 和 expose）。它就像一座桥梁，连接了组件的内部和外部。

四、handleSetupResult：决定组件的命运

handleSetupResult 函数负责处理 setup 函数的返回值，它的行为取决于返回值的类型。

// packages/runtime-core/src/component.ts

function handleSetupResult(
  instance: ComponentInternalInstance,
  setupResult: unknown,
  isSSR: boolean
) {
  if (isFunction(setupResult)) {
    // setup returned render function
    if (__DEV__ && instance.type.render) {
      warn(
        `setup() returned a render function, but component already has a "render" option.n` +
          `The render function from "setup" will be used.`
      )
    }
    instance.render = setupResult
  } else if (isObject(setupResult)) {
    // setup returned bindings.
    if (__DEV__ && isReactive(setupResult)) {
      warn(
        `setup() returned an object that is already reactive.n` +
          `setup() should return a plain object instead.`
      )
    }
    instance.setupState = proxyRefs(setupResult)
  } else if (__DEV__ && setupResult !== undefined) {
    warn(
      `setup() should return an object. Received: ${String(setupResult)}`
    )
  }
  finishComponentSetup(instance, isSSR)
}

如果 setupResult 是一个函数: 那么就把它作为组件的渲染函数。这意味着组件将使用 setup 函数返回的函数来渲染 DOM。
如果 setupResult 是一个对象: 那么就把它合并到组件实例的 setupState 对象中。 setupState 对象包含了 setup 函数返回的所有状态。
如果 setupResult 是 undefined: 那么就什么也不做。

handleSetupResult 的作用非常关键，它决定了组件的渲染方式和状态管理方式。

五、示例代码：从“毛坯房”到“精装修”

为了让大家更直观地理解 createComponentInstance 和 setupComponent 的作用，咱们来看一个简单的例子。

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

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

export default {
  setup() {
    const message = ref('Hello, Vue 3!');
    const count = ref(0);

    const increment = () => {
      count.value++;
      message.value = `Count: ${count.value}`;
    };

    return {
      message,
      increment
    };
  }
};
</script>

当 Vue 编译这个组件时，它会生成一个组件选项对象，然后调用 createComponentInstance 和 setupComponent 来创建组件实例。

createComponentInstance: 创建一个空的组件实例，包含 uid、vnode、type 等属性。
setupComponent:
- 解析 props 和 slots（在这个例子中，它们都是空的）。
- 调用 setup 函数。
- setup 函数返回一个对象，包含 message 和 increment。
- handleSetupResult 将 message 和 increment 合并到组件实例的 setupState 对象中。
- 设置组件的渲染函数（在这个例子中，渲染函数是由 Vue 编译器生成的）。

最终，组件实例就包含了所有必要的信息，可以用来渲染 DOM。

六、总结：Vue 组件的“生命之源”

createComponentInstance 和 setupComponent 是 Vue 3 组件的“生命之源”。它们负责创建组件实例，并初始化组件的状态和行为。

函数名	作用	备注
`createComponentInstance`	创建组件实例对象，初始化一些基本属性，相当于创建了一个“毛坯房”。	只是一个空壳子，等待 `setupComponent` 来填充内容。
`setupComponent`	对组件实例进行“精装修”，包括解析 `props`、`attrs` 和 `slots`，调用 `setup` 函数，设置渲染函数。	是组件实例初始化的关键步骤。
`setupContext`	传递给 `setup` 函数的上下文对象，包含了 `expose`、`emit` 和 `attrs` 等属性。	连接组件内外的桥梁。
`handleSetupResult`	处理 `setup` 函数的返回值，决定组件的渲染方式和状态管理方式。	根据 `setup` 函数的返回值类型，执行不同的操作。

理解了这两个函数的工作原理，你就能更深入地理解 Vue 3 组件的内部机制，也能更好地使用 Vue 3 来开发应用程序。

好了，今天的讲座就到这里。希望大家有所收获！如果有什么问题，欢迎在评论区留言。咱们下期再见！

发表回复 取消回复

发表回复取消回复