Vue3源码探究-构建流程（1）

     我们都知道，在用vue构建项目时，都需要调用createApp函数来构建app的对象，该对象内有mount方法，可以帮助我们把对象挂载到我们想要挂载的dom节点上。那么这个app对象究竟是什么，它还包含了哪些属性，它又是怎么被创建出来的。我们来一起看一看

  我们自己写的createAPP 这个从vue中导出的方法其实从vue源码中runtime-dom包中的index.ts中导出，也就是上图这个方法，这个函数内部上来就调用了ensureRenderer(),ensure为确保的意思，也就是说这个函数是为了确保Renderer的生成，初始化的，它返回了一个对象，这个对象内有createAPP的方法，并且把参数传入，这个参数就是我们在外部调用createAPP（）时传入的根组件。之后ensureRenderer（）返回对象里的createAPP返回了一个app对象。所以要搞清这个app对象，我们需要看一下ensureRenderer（）这个函数。

 我们可以看到这个函数返回了一个renderer变量，其实阅读源码我们能学到很多东西，就比如说这个命名，这个函数的功能是返回一个renderer，这个函数名叫ensureRenderer,并且可以看到注释，这个renderer变量的使用其实是一个闭包，它不会被销毁，是lazy create，只有在第一次进入的时候会执行createRenderer（）函数，这个函数接收了一个变量，内含了一些操作dom的方法。这些方法是已经封装好了的，就在该文件夹的nodeOps.ts,patchProp.ts中。接下来我们来看一看createRenderer这个函数

 该函数返回baseCreateRenderer的返回值

 这里把刚刚传入的一些操作dom ,props的方法都解构了

最终这个函数返回了该对象。并且在上面定义了一系列方法。回到一开始

我们调用的这个方法就是createAppAPI(render,hydrate)的返回值。这里用了函数的科里化。所以要知道createAPP(...arg)返回的app对象究竟是什么，我们得看一些createAppAPI这个函数。

这个函数返回createApp()，至此，我们终于拿到了真正生成app的函数了

这个函数定义了一个app对象，这个app对象里面有一些私有变量和一些我们比较熟悉的方法。比如use，mixin,mount,component...至此内存中有了这个app对象和在renderer定义的一系列方法，包括render方法。

注：本人水平有些，写文章的目的是理清思路，也希望能给部分人带来一些帮助。如有误，请批评指教。