之前一直对vue生命周期的执行顺序理解比较含糊，这一次我用几个简单的例子把几种情况统一的整理和记录一下。
一个组件的生命周期
一个页面常使用的生命周期有下面几个：
beforeCreate
created
beforeMount
mounted
beforeDestroy
destroyed
如果只有一个组件，那很好理解，直接按照顺序执行就是了。在组件初始化渲染的时候它会执行下面四个：
beforeCreate
created
beforeMount
mounted
在组件销毁的时候会执行下面两个:
beforeDestroy
destroyed
但是真实的情况不会这么理想，他可能会有很多组件，并且这些组件之间有父子级的关系，兄弟之间的关系。
接下来我增加一些难度，从一个组件增加到两个组件。然后这两个组件有两种情况：一种是父子关系，一种是兄弟关系，我们分别来分析。
两个组件之父子关系
假设现在有一个页面A，页面A有一个组件B。代码示意图如下：
// 页面A
<span>我是页面A</span>
<componentB />
此时渲染这个页面A的过程是这样的：
beforeCreate - 页面A
created - 页面A
beforeMount - 页面A
beforeCreate - 组件B
created - 组件B
beforeMount - 组件B
mounted - 组件B
mounted - 页面A
在执行页面A到生命周期函数beforeMount之后，开始执行组件B的生命周期函数，组件B渲染结束之后，再渲染A页面未完成的部分。
那一鼓作气，我把兄弟关系的执行顺序也搞出来。
两个组件之兄弟关系
先暂时忘记前面说的父子关系，回到这里来。假设现在有一个页面A，一个页面B。假设打开页面A，然后跳转到页面B，要经历什么？
你可以先想想哦！我先告诉你结论，等会再做解析。
beforeCreate - 页面A
created - 页面A
beforeMount - 页面A
mounted - 页面A
beforeCreate - 页面B
created - 页面B
beforeMount - 页面B
beforeDestroy - 页面A
destroyed - 页面A
mounted - 页面B
好啦，从页面A跳转到页面B的时候，会先执行目标页面B的初始化函数beforeCreate、created和beforeMount（这一点可能是很多人的误区，我曾经傻傻的以为先执行销毁页面A的函数），然后才开始执行销毁页面A的生命周期函数，销毁结束了才执行目标页面B的mounted。
好辣，两个情况都理解之后，这一篇文章的知识点基本就掌握了，先给你点个大大的赞。可是最后我手残了，想给自己做个课后练习巩固一下。
我记得高中老师说的一句话，“把简单的事情做到极致，你就是专家”。好吧，我对成为专家还是抱有一点期望。所以，奥利给，继续咯。
四个组件之大杂烩
把前面学到的知识做一个整理。比如现在有两个页面，每个页面内都有一个组件。页面A有一个组件A，页面B有一个组件B。示意图如下：
// 页面A
<span>我是页面A</span>
<componentA />
// 页面B
<span>我是页面B</span>
<componentB />
假设打开页面A，然后跳转到页面B，要经历什么？
我还是先把结论贴出来吧。
beforeCreate - 页面A
created - 页面A
beforeMount - 页面A
beforeCreate - 组件A
created - 组件A
beforeMount - 组件A
mounted - 组件A
mounted - 页面A
beforeCreate - 页面B
created - 页面B
beforeMount - 页面B
beforeCreate - 组件B
created - 组件B
beforeMount - 组件B
beforeDestroy - 页面A
beforeDestroy - 组件A
destroyed - 组件A
destroyed - 页面A
mounted - 组件B
mounted - 页面B
这里的beforeDestroy和destroyed需要特别注意一下。beforeDestroy是从父级往子级方向执行的，destroyed是子级往父级方向执行的。
总结
- 父子组件间页面渲染会先执行beforeCreate、created、beforeMount，然后执行子组件并渲染完成，结束后执行父组件的mounted
- 兄弟组件之间的切换不是我们之前想象的先销毁当前组件，再去渲染目标组件（这样会使白屏时间很长）。正确的姿势是先执行目标组件的beforeCreate、created、beforeMount，然后再执行当前组件的beforeDestroy和destroyed，销毁结束之后再执行目标组件的mounted。
- 大杂烩情况下，需要学习的是beforeDestroy是从父级往子级方向执行的，destroyed是子级往父级方向执行的。
码字不易，如果对你有帮助希望能点赞或者收藏。
感谢阅读！
