一、组件的安装过程
vue3.0入口函数：
const Counter = {
data() {
return {
counter: 0
}
}
}
Vue.createApp(Counter).mount('#counter')
入口函数查看runtime-dom/index.ts文件的createApp方法的源码如下：
返回一个app的对象，app来自于ensureRenderer方法返回的对象执行createApp方法执行得到。首先看一下ensureRenderer方法的内部逻辑。
rendererProps来自于两部分组成：
- nodeProps，查看runtime-dom/patchProps.ts，集合了原生dom方法，处理dom；
- patchProps，查看runtime-dom/patchProps.ts，处理元素属性等。
createRenderer来自于runtime-core/renderer.ts方法，大概有2000行代码，截取部分源代码如下：
该方法返回了一个包含createApp的对象，createApp来自于createAppAPI方法的执行，createAppAPI接受render、hydrate两个参数，返回createApp函数，createApp接收rootComponent、rootProps两个参数，其中rootComponent就是我们入口函数调用时传的Counter组件。
app对象中包含内容：
- 属性：_uid、_component、_props、_container、_context、_instance
- 方法：use、mixin、component、directive、mount、unmount、provide
其中mount组件的作用就是将根组件安装到容器dom上。下面分析下函数的内部实现
1. 创建根node节点对象,
vnode节点结构如下：
2. 执行render函数，进行根组件的挂载。render函数来源于runtime-core/renderer.ts中的baseCreateRenderer方法。
render函数中，首次安装时vnode不是null，走patch逻辑，patch中根据node节点的type类型，分别进行处理。
举个例子，假如type是组件类型，执行processComponent方法，首次安装的时候执行mountComponent方法，查看setupRenderEffect方法。
setupRenderEffects执行组件的render方法，生成虚拟dom树，对dom树进行patch调用。patch分析node节点的类型，如果是原生类型，通过nodeProps、patchProps传入的原生dom操作方法进行原生的生成以及安装。
二、总结
以上分析了vue组件安装的逻辑处理，从createApp到patch进行真实dom的安装，其中大部分的逻辑都集中在runtime-core/renderer.ts的baseCreateRenderer方法中。下一节分析Vue3.0更新过程的逻辑处理。
