大家好，今天和大家分享一个小知识，算是vue生命周期的扩展，我们都了解vue中每个页面都有自己的生命周期，但是如果有子组件，那这个子组件又是什么时候开始被建立，又是什么时候被销毁的呢，本章以 vue3 生命周期为例，来探索一下这个小问题，（用到了setup语法糖）
vue3的生命周期
setup()函数：vue3的新概念，在组件创建前被调用。一般用于数据初始化等（常用）
onBeforeMount()函数:组件被挂载到dom之前调用，此时dom元素还没有生成
onMounted()函数:组件被挂载在dom，一般设置定时器，dom建立可作为一些js库的容器等（常用）
onBeforeUpdate()函数：组件数据更新导致 DOM 更新之前调用，检查数据的变化情况
onUpdated()函数：组件的 DOM 更新之后调用
onBeforeUnmount()：组件卸载之前调用，清理一些定时器、事件监听器等（常用）
onUnmounted():在组件卸载之后调用
除了上面常用的，还有onActivated()，onDeactivated()函数，keep-alive组件缓存的生命周期可以去另外一个文章了解(vue2 和 vue3 ：关于keep-alive 使用的不同vue3中不能直接使用keep-alive包裹， vue2 - 掘金 (juejin.cn))
测试父子组件建立过程中生命周期变化
这里通过路由建立一个页面father，里面有一个子组件kid，进入此页面观察生命周期变化
从我们测试的案例中，很清晰看到，father在完全挂载dom之前（onMounted函数之前），子组件kid挂载完成，然后father挂载完成。
那么如果不只一个子组件呢
此时大家可能会认为，父子组件之间什么周期的顺序是，父组件的挂载之前，子组件们是一个个的挂载完成，比如如果有多个子组件：
- father-onBeforeMount ，
- kid-onBeforeMount
- kid-onMounted
- kid2-onBeforeMount
- kid2-onMounted
- father-onMounted
而实际上的结果是这样，这是需要注意的挂载都是在一块挂载
那么销毁是不是和上面这种顺序一样呢
我们通过跳转到别的网页，对这个father页面进行销毁，此时我们可以观察到，还是由父组件father开始，然后孩子组件
注意：不是我们完全将上一个页面销毁，然后建立一个新页面
other。而是在上一个组件中所有生命周期的onBeforeUnmount函数，之后新组件就开始建立了。然后子组件先销毁，然后父组件，这和创建的过程一样，最后新的页面other挂载完成
与上面的测试相同，我们再试试多一些组件又是如何
由下面的案例可以看出，在我们的案例中，整体的顺序还是和创建是一样的
总结
从上面的案例中我们可以看到，对于父子组件之间的生命周期的建立的过程，它不是一个个建立好，然后再进入下一步，其中onBeforeMount挂载之前和onBeforeUnmount卸载之前它就像是一个准备活动，都准备好了，再一个个出发。
个人理解，加强记忆：（比喻可能不恰当，旨在加深记忆）
创建：就像坐车出门，车子就是那个父组件，车子准备好了
onBeforeMount-father，坐车的人是子组件，子组件一个个进入车内准备好onBeforeMount-kids，然后按顺序先进入车子人一般先坐好，也就是挂载好了这个过程onMounted-kid,最后开车出发onMounted-father,卸载的过程也是相同。
销毁：车子先停好
onBeforeUnmount-father,子组件按顺序依次准备下车onBeforeUnmount-kid,子组件都准备好了，一个个下车onUnmounted-kid,最后车子锁好onUnmounted-father
跳转到其他页面：我们继续上面销毁的例子，车子先停好
onBeforeUnmount-father,子组件按顺序依次准备下车onBeforeUnmount-kid,这个其他页面就是安保，我们下车之前，安保要准备好保护我们的安全onBeforeMount-other，子组件都准备好了，一个个下车onUnmounted-kid,最后车子锁好onUnmounted-father，此时车内清空，安保上线保护onMounted-other
