皮皮网

1.Vue3源码系列（七）：createApp— 一切的源码起源
2.Vue3 源码中创建应用实例(createApp)流程

Vue3源码系列（七）：createApp— 一切的起源

       在使用Vue3构建前端项目时，我们经常在main.js/main.ts中通过createApp这个API创建应用程序实例。源码这篇文章将深入探讨createApp背后的源码故事。首先，源码让我们了解几个关键的源码类型：

App: createApp返回的实例，包含了项目常用方法，源码linux read源码链式调用友好，源码兼容Vue2的源码filter，并提供了内部属性。源码

AppConfig: 应用配置，源码包含Vue2中常见的源码选项，如组件合并策略、源码全局属性和编译器设置等。源码

AppContext: 上下文对象，源码记录组件、源码指令等信息，支持热更新和Vue2 filter的rtspserver源码兼容。

Plugin: 与Vue2类似，Plugin和install方法定义清晰，可以是函数或对象。

CreateAppFunction: createApp函数的类型，接受根组件和可选的根组件属性。

       实际上，Vue3的起点在于createApp API，它定义在packages/runtime-dom/src/index.ts。metro源码我们从这里开始追踪其内部流程：

createApp: 乍看之下，createApp似乎在renderer上，它由createRenderer创建。createRenderer在packages/runtime-core/src/renderer.ts中定义，调用baseCreateRenderer，这个函数包含diff操作方法，但核心的createApp源自createAppAPI。

createAppAPI: 在baseCreateRenderer的NBASE源码返回值中，createAppAPI接收render和hydrate方法，将它们组合成我们熟知的createApp。这个函数约行，逻辑清晰地构造了应用实例。

       虽然我们已经了解了createApp的基本创建过程，但render函数的详细过程尚未揭示。后续会进一步剖析render的执行机制。

Vue3 源码中创建应用实例(createApp)流程

       Vue3的pudnide源码核心应用实例创建过程主要由createAppAPI驱动，这个过程涉及到了关键函数如beforeCreateRender和createApp。createApp位于/vue-core/vue-next/packages/runtime-dom/src/index.ts中，它是项目构建的起点，功能包括组件实例的构建和页面挂载。

       首先，createApp通过ensureRenderer函数来构建组件实例，这个过程涉及虚拟节点的操作，如更新和挂载。ensureRenderer会返回createRenderer，进一步生成baseCreateRenderer，最终返回createAppAPI。这个函数的主要任务是为虚拟节点添加如mixin、use、mount、props和emits等功能。

       在beforeCreateRender中，主要负责创建render和hydrate渲染器，这些渲染器负责DOM操作，如节点的更新和挂载。虽然这部分内容详细，但略过了具体的实现细节，有兴趣的话，可以参考vue-core/vue-next/packages/runtime-core/src/renderer.ts文件。

       createAppAPI函数的核心是返回createApp，这个函数接收根组件和其props作为输入，用于生成Vue应用程序实例。至此，组件实例app已经创建完成，但挂载到页面的过程将在后续内容中深入讨论。