VUE -- 基础知识讲解（三）
【点赞收藏加关注，前端技术不迷路~】
一、vue子组件和父组件创建和挂载顺序
1.创建和挂载顺序：父创建 => 子创建 => 子挂载 => 父挂载
组件创建的树形递归回溯，创建过程自上而下，挂载过程自下而上。
parent created => child created => child mounted => parent mounted
2.原因
Vue创建过程是⼀个递归过程，先创建父组件，有子组件就会创建子组件，因此创建时先有父组件再有子组件；子组件首次创建时会添加mounted钩子到队列，等到patch结束在执行它们，可见子组件的mounted钩子是先进入到队列中的，因此等到patch结束执行这些钩子时也先执行。
3.源码
1）观察beforeCreated和created钩⼦的处理。（VUE相关源码）（VUE相关源码）
2）观察beforeMount和mounted钩⼦的处理。（VUE相关源码）
二、组件的缓存与更新
缓存组件使用keep-alive组件，这是⼀个非常常见且有用的优化手段，vue3中keep-alive有比较大的更新。
1.keep-alive的作用与用法
开发中缓存组件使用keep-alive组件，keep-alive是vue内置组件，keep-alive包裹动态组件component时，会缓存不活动的组件实例，而不是销毁它们，这样在组件切换过程中将状态保留在内存中，防止重复渲染 DOM
<keep-alive> <component :is="view"></component>
</keep-alive>2.使用细节，例如缓存指定/排除、结合router和transition
结合属性include和exclude可以明确指定缓存哪些组件或排除缓存指定组件。
vue2是keep-alive包裹router-view。
<keep-alive><router-view v-slot="{ Component }"><component :is="Component"></component></router-view>
</keep-alive>vue3中结合vue-router时变化较大，现在需要反过来用router-view包裹keep-alive：
<router-view v-slot="{ Component }"><keep-alive><component :is="Component"></component></keep-alive>
</router-view>