分析 Vue 3 源码中 `createApp` 方法如何创建应用实例，并初始化渲染过程。

各位靓仔靓女们，早上好！今天咱们来聊聊 Vue 3 的"造物主"——createApp。这玩意儿就像是 Vue 应用的“亚当和夏娃”，没有它，啥都没有。咱们的目标是扒开它的源码，看看它到底是怎么创造出一个 Vue 应用实例，并且启动那激动人心的渲染过程的。

一、开场白：createApp是何方神圣？

首先，咱们得明确 createApp 的地位。它不是一个普通的函数，它是 Vue 3 提供的一个全局 API，专门用来创建一个 Vue 应用实例。简单来说，你想要用 Vue 搞事情，就得先用 createApp "捏"一个应用出来。

import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      message: 'Hello, Vue 3!'
    }
  },
  template: '<h1>{{ message }}</h1>'
})

app.mount('#app')

上面的代码是最简单的 Vue 应用启动方式。createApp 接收一个组件选项对象（这里就是一个简单的对象，包含了 data 和 template），然后返回一个应用实例 app。最后，调用 app.mount('#app') 将应用挂载到页面上的 #app 元素。

二、深入源码：createApp的秘密

好了，废话不多说，直接上源码（简化版，去掉了类型定义和一些不常用的逻辑，方便理解）：

import { createComponentInstance, setupComponent } from './component'
import { render } from './renderer'

export function createAppAPI(render) {
  return function createApp(rootComponent, rootProps = null) {
    const app = {
      _component: rootComponent,
      _props: rootProps,
      _container: null,
      mount(rootContainer) {
        // 1. 创建组件实例
        const instance = createComponentInstance(rootComponent, rootProps);

        // 2. 准备组件环境 (setup)
        setupComponent(instance);

        // 3. 渲染组件 (patch -> mountComponent)
        render(instance, rootContainer);

        app._container = rootContainer; // 记录根容器
      }
    };

    return app;
  };
}

// 在 Vue 源码中，createAppAPI 会传入 render 函数
export const createApp = createAppAPI(render);

代码虽然不多，但信息量很大。咱们一步一步来分析：

1. createAppAPI(render)： createApp 实际上是由 createAppAPI 函数生成的。这样做的好处是，可以通过依赖注入的方式，将不同的渲染器（render）传入，从而实现跨平台渲染（比如，可以渲染到浏览器，也可以渲染到 Native）。 这里传入的就是 Vue 3 的核心渲染器 render。

2. createApp(rootComponent, rootProps = null)： 这才是我们真正调用的 createApp 函数。它接收两个参数：

   • rootComponent：根组件，也就是你传给 createApp 的那个组件选项对象。
   • rootProps：根组件的 props，可以用来传递一些初始数据。

3. 应用实例 app： createApp 函数的核心就是创建一个应用实例 app。这个 app 对象包含以下几个重要的属性和方法：

   • _component：存储根组件。
   • _props：存储根组件的 props。
   • _container：存储挂载的目标容器。
   • mount(rootContainer)：最重要的方法，用来将应用挂载到指定的容器。

4. mount(rootContainer) 内部流程： mount 方法是整个应用启动的核心。它主要做了以下几件事：

   • 创建组件实例 (createComponentInstance)： 根据根组件的选项对象，创建一个组件实例。这个实例包含了组件的状态、props、生命周期钩子等等。 我们稍后会深入分析 createComponentInstance。

   • 准备组件环境 (setupComponent)： 调用组件的 setup 函数（如果有的话），处理 props、context、inject 等逻辑，并将 setup 函数返回的值暴露给模板。 setupComponent 也是一个非常重要的函数，我们稍后也会详细分析。

   • 渲染组件 (render)： 调用核心渲染器 render，将组件实例渲染到指定的容器。 render 函数会将组件的模板编译成 VNode，然后将 VNode 转换成真实的 DOM 元素，并插入到容器中。

三、深入剖析：createComponentInstance

createComponentInstance 函数负责创建组件实例。组件实例是 Vue 3 中非常重要的概念，它包含了组件的所有信息和状态。

export function createComponentInstance(vnode, parentComponent) {
  const instance = {
    vnode,
    type: vnode.type, // 组件的选项对象
    next: null, // 用于更新
    appContext: null, // 应用上下文
    parent: parentComponent,
    provides: parentComponent ? parentComponent.provides : {}, // 继承父组件的provides
    isMounted: false,
    subTree: null, // vnode tree
    emitsOptions: {}, // 组件的 emits 选项
    emit: null, // 组件的 emit 方法
    propsOptions: {}, // 组件的 props 选项
    props: {}, // 组件的 props 数据
    attrs: {}, // 组件的 attrs 数据
    slots: {}, // 组件的 slots 数据
    setupState: {}, // setup 返回的状态
    setupContext: null, // setup 的 context
    render: null, // 组件的渲染函数
    exposed: {}, // 暴露给父组件的数据
    isKeepAlive: false,
    useCache: false
  };

  return instance;
}

这个函数接收两个参数：

• vnode：组件的 VNode 对象。VNode 是 Vue 3 中用来描述 DOM 结构的一种数据结构。
• parentComponent：父组件的实例。

函数返回一个组件实例 instance。这个 instance 对象包含了非常多的属性，咱们挑几个重要的说一下：

• vnode：组件的 VNode 对象。
• type：组件的选项对象，也就是你传给 createApp 的那个对象。
• parent：父组件的实例。
• provides：用于 provide/inject 的数据。
• isMounted：表示组件是否已经挂载。
• subTree：组件渲染出来的 VNode 树。
• propsOptions：组件的 props 选项。
• props：组件的 props 数据。
• slots：组件的 slots 数据。
• setupState：setup 函数返回的状态。
• render：组件的渲染函数。

可以看到，createComponentInstance 函数只是创建了一个空的组件实例，并没有做太多的初始化工作。真正的初始化工作是在 setupComponent 函数中完成的。

四、揭秘：setupComponent

setupComponent 函数负责准备组件的环境，包括处理 props、context、inject 等逻辑，并将 setup 函数返回的值暴露给模板。

import {
  normalizePropsOptions,
  normalizeEmitsOptions
} from './componentProps'
import { applyOptions } from './componentOptions'
import { initSlots } from './componentSlots'
import {
  createComponentPublicInstance,
  PublicInstanceProxyHandlers
} from './componentPublicInstance'
import { isFunction } from '@vue/shared'

export function setupComponent(instance) {
  const { props, children } = instance.vnode
  const isStateful = instance.isStateful = isFunction(instance.type) //函数组件还是对象组件

  // 初始化 props
  initProps(instance, props)

  // 初始化 slots
  initSlots(instance, children)

  // 设置组件实例
  const Component = instance.type
  if (Component.setup) {
    setCurrentInstance(instance);
    const setupResult = Component.setup(instance.props, {
      emit: instance.emit.bind(null, instance)
    });
    setCurrentInstance(null);

    handleSetupResult(instance, setupResult);
  } else {
    finishComponentSetup(instance)
  }

  // 创建组件的公共实例 (Proxy)
  instance.proxy = createComponentPublicInstance(instance, PublicInstanceProxyHandlers);
}

function initProps(instance, rawProps) {
  const propsOptions = instance.type.props;
  if (propsOptions) {
    normalizePropsOptions(instance, propsOptions);
  }

  if (rawProps) {
    for (const key in rawProps) {
      const value = rawProps[key];
      // TODO: validate props
      instance.props[key] = value;
      instance.attrs[key] = value;
    }
  }
}

function handleSetupResult(instance, setupResult) {
  if (typeof setupResult === 'function') {
    // setup 返回的是一个渲染函数
    instance.render = setupResult;
  } else if (typeof setupResult === 'object') {
    // setup 返回的是一个对象
    instance.setupState = setupResult;
  }

  finishComponentSetup(instance)
}

function finishComponentSetup(instance) {
  const Component = instance.type;
  if (!instance.render) {
    // 如果没有 render 函数，则从 template 编译
    if (!Component.render && Component.template) {
      // TODO: compile template
    }
    instance.render = Component.render;
  }
}

这个函数接收一个组件实例 instance 作为参数。它主要做了以下几件事：

1. 初始化 props (initProps)： 根据组件的 propsOptions，对传入的 props 进行处理。

   • normalizePropsOptions：规范化 props 选项，将不同的 props 定义方式统一成一种格式。
   • 将传入的 props 赋值给 instance.props 和 instance.attrs。 instance.props 存储的是声明过的 props，instance.attrs 存储的是未声明的 props。

2. 初始化 slots (initSlots)： 处理组件的 slots。

3. 处理 setup 函数： 如果组件定义了 setup 函数，则调用 setup 函数。

   • setCurrentInstance：设置当前组件实例。 这使得在 setup 函数中可以访问到当前组件实例。
   • setup 函数接收两个参数：
     • props：组件的 props 数据。
     • context：一个包含 emit、attrs、slots 等属性的对象。
   • handleSetupResult：处理 setup 函数的返回值。
     • 如果 setup 函数返回的是一个函数，则将这个函数作为组件的 render 函数。
     • 如果 setup 函数返回的是一个对象，则将这个对象赋值给 instance.setupState。

4. 完成组件设置 (finishComponentSetup)： 如果组件没有定义 render 函数，则尝试从 template 编译生成 render 函数。

5. 创建组件的公共实例 (createComponentPublicInstance)： 创建一个 Proxy 对象，作为组件的公共实例。 这个 Proxy 对象拦截了对组件实例的访问，可以进行一些额外的处理，比如访问 props、emit 等。

五、渲染启动：render 函数

render 函数是 Vue 3 的核心渲染器。它的主要作用是将组件的 VNode 树转换成真实的 DOM 元素，并插入到指定的容器中。由于篇幅限制，这里只简单介绍一下 render 函数的流程：

1. 创建或更新 VNode： 根据组件的状态，创建或更新 VNode 树。
2. patch： 比较新旧 VNode 树，找出需要更新的 DOM 元素。
3. mountComponent/processElement/processText： 根据 VNode 的类型，执行不同的操作。
   • mountComponent：挂载组件。
   • processElement：处理元素节点。
   • processText：处理文本节点。
4. 将 DOM 元素插入到容器中。

render 函数的实现非常复杂，涉及到大量的 DOM 操作和优化技巧。这里就不展开详细讲解了。

六、总结：createApp 的流程

用表格总结一下 createApp 的整个流程：

步骤	函数/方法	作用
1. 创建应用实例	createAppAPI(render)	创建 createApp 函数，并将渲染器 render 注入。
2. 调用 createApp(rootComponent)	createApp	创建应用实例 app，存储根组件和 props。
3. 调用 app.mount(rootContainer)	app.mount	启动应用挂载过程。
4. 创建组件实例	createComponentInstance	根据根组件的选项对象，创建一个组件实例 instance，包含组件的状态、props、生命周期钩子等。
5. 准备组件环境	setupComponent	调用组件的 setup 函数（如果有的话），处理 props、context、inject 等逻辑，并将 setup 函数返回的值暴露给模板。
6. 初始化 props	initProps	根据组件的 propsOptions，对传入的 props 进行处理。
7. 初始化 slots	initSlots	处理组件的 slots。
8. 处理 setup 函数	Component.setup	调用组件的 setup 函数，获取 setup 函数的返回值。
9. 处理 setup 函数返回值	handleSetupResult	根据 setup 函数的返回值，设置组件的 render 函数或 setupState。
10. 完成组件设置	finishComponentSetup	如果组件没有定义 render 函数，则尝试从 template 编译生成 render 函数。
11. 创建组件的公共实例	createComponentPublicInstance	创建一个 Proxy 对象，作为组件的公共实例。
12. 渲染组件	render	将组件的 VNode 树转换成真实的 DOM 元素，并插入到指定的容器中。

七、总结

createApp 作为 Vue 3 应用的入口，其内部流程虽然涉及多个函数和复杂的逻辑，但核心目标是：

• 创建应用实例，保存根组件信息。
• 创建组件实例，初始化组件的状态和环境。
• 启动渲染过程，将组件渲染到页面上。

理解 createApp 的流程，可以帮助我们更好地理解 Vue 3 的组件化机制和渲染原理，从而更好地使用 Vue 3 开发应用。

今天的分享就到这里，希望对大家有所帮助。下次有机会再和大家一起深入探讨 Vue 3 的其他源码。 散会！