前言

大家好！我是乾阳，最近在面试，发现外面的面试官都学聪明了，都不爱问你响应式了，喜欢问你vue3的初始化的流程。搞得我不得不🧐一下子

调试环境

    git clone https://github.com/vuejs/core.git

拉取下来之后pnpm安装一下 执行

pnpm serve

然后打开

http://localhost:55018/packages/vue/examples/composition/todomvc

就是我们喜闻乐见的todos，打开我们的开发者调试器

如果不出意外的在93行我们可以看到一个非常熟悉的东西 createApp,那这里就是初始化的开始，我们打上断点刷新我们的网页进入断点，在进入下一步就会进入我们的runtime-dom/src/index.ts

就会看到我们createApp函数，可以🎉一下了，起码我们找到了入口，接下来就是看调用栈看看这个函数执行了什么。 接下来我们开始下一步，很直接的看调用，其他我们不关心

这里清晰的看到我们调用了ensureRenderer函数，结合createApp源码

可以发现其实createApp是借助了这个函数去创建了一个app，在下面就到mount挂载了，那我们就直接进入ensureRenderer去看看发生了什么？

这个函数里面我们看到了renderer并且做了逻辑判断，如果没有则创建一个renderer，既然是在挂载之前那么这个应该就是渲染器（我百度的），一开始我们是没有渲染器的，那么他就会去创建一个渲染器，渲染器把我们的虚拟dom渲染成真实的dom这个过程叫做挂载，渲染器怎么知道把真实dom挂载到哪里呢？那就是传入一个挂载点，渲染器接收一个挂载点作为参数，用来指定具体挂载的位置。那就是我们一开始代码里面的app.mount('#app') 这里我们就可以知道，其实他接收的挂载点其实是一个真实dom，把这个dom作为容器放入我们需要渲染的内容。

那到现在来说流程就开始清晰了，createApp其实就是创建一个renderer并且根据我们传入的容器执行渲染。

createRenderer

接下来我们就去看看renderer是怎么个过程，我们把断点打到

然后发现他又返回了一个函数，没事我们接着走，然后我就进入到了一个很长的文件里面了，没关系我们不用理解其相关的实现，只要看他return的东西就好了，我们会在2359行看到

又出现了一个工厂函数，我们在2362行打上断点，看看这个东西返回了个啥

我们往下拉会看到很多我们非常熟悉的方法use，mixin等

那么毫无疑问这里才是创建我们app实例的地方，好家伙。。。 但是注意⚠️一下我们此行的目的只是为了摸清vue3的初始化过程到底经历了什么，所以我们不要跑偏，既然我们找到了创建app实例的地方，那么我们就能找到关键的mount，我们接着往下看

这里我们看到了mount方法，我们在286打上断点，他这里写得很明显了是否挂载，我们既然是第一次进来的那么一定没有挂载，进来然后看到vnode这么多年了大家应该都知道了vnode就是虚拟dom，这里应该是创建虚拟dom的地方,然后我们会又一次来到分叉口

这里应该是判断一下我们是什么渲染模式，我们客户端渲染应该走的render，进入render函数

这里我直接步入了，可以看到和我们上面的想法一致第二个参数传入div#app，这个patch就是一个虚拟dom转真实dom并且追加到宿主#app中。 至此其实整个vue3实例创建，挂载的流程，我们其实已经摸清楚了，具体实现有待我去深究。