03-Vue3.0源码阅读之初始化流程分析「这是我参与2022首次更文挑战的第21天，活动详情查看：2022首次更文挑战

「这是我参与2022首次更文挑战的第21天，活动详情查看：2022首次更文挑战」。

前言

经常使用Vue的我们，会不会存在一个疑问，Vue创建的时候发生了什么Vue.createApp()可以create出什么东西，是个对象么？是个什么样子的对象？应用实例被创建的时候，有创建过程么，都经历了什么最终才会create出App。

兴趣是最好的老师，我们可以在使用中发现疑问然后深入下去。这也是为什么源码阅读前都会要求对API熟悉，从API出发，我们来揭开Vue3.0中的初始化流程。

创建初始化条件

我们先在之前拉取的代码中，在/src/vue/examples/中创建一个html，作者命名为01-init.html，代码如下：

<div id="app">
  <h1>vue3 init</h1>
  <comp></comp>
</div>
<script src="../dist/vue.global.js"></script>
<script>
  
  const app = Vue.createApp({})

  app.component('comp', {
    template: '<div>1212</div>'
  })

  app.mount('#app')
</script>

其中需要注意的是，为了便于调试，引入的Vue文件是按照前面文档讲述的方式自己打包出来的Vue。

创建实例&实例对象

下面来对于断点调试法以及堆栈分析法进行进一步的熟悉，此次研究的目的是分析创建过程，因此我们在Chrome控制台资源部分找到01-init文件，打好断点后刷新页面，鼠标悬浮查看createApp的对应js如下图：

进去后我们可以看到，代码中下一步是ensureRenderer.createApp,纵览整个方法如下

可以看出，创建完app后用户需要调用.mount方法进行了挂载，这就和我们使用的方法对应了起来，接下来直奔主题，查看ensureRenderer的createApp方法，

单步调试进入下一个方法getGlobalThis(),这个方法是Vue中最长的一个方法，我们接着走主线，

从return可以看出，createApp是从工厂函数createAppAPI所创建出来的，工厂函数一般是为了将功能进行扩展，使其变的通用，搜索createAppAPI，找出它是同级apiCreateApp文件中的方法，进入文件中可以看到入参两个，app中提供get、set、use、mixin、component、directive、mount、unmount、provide等方法。

至此，我们得到了Vue.createApp经历了renderer中的createApp方法，并且创建了一个含有get、set、use、mixin、component、directive、mount、unmount、provide等方法的实例对象。