最近面试遇到一个很有意思的问题：
“你知道Vue的同一生命周期在子组件先执行还是父组件先执行？”
可能了解Vue的执行机制的同学就已经知道答案了，不着急说答案，想请你慢慢看完。
我们来测试一下：
我们讲讲最重要的俩：created 和 mounted
我首先创建了两个子组件：CompOne 和 CompTwo，分别在两个组件中写入了mounted方法和created方法。
讯享网
接下来呢，我们把他引到父组件（App.vue）中来看看，当然，在父组件（App.vue）中也有created和mounted方法
讯享网
这时候我们来看看浏览器的输出结果：
结论：
- 不论子组件有多少，父组件的生命周期created总是先执行的，父组件的生命周期mounted总是最后一个执行的
- 平级各子组件的生命周期created是接下来执行的，然后是mounted
这里我引发了一个思考？
”调换下组件的位置看看执行结果会是什么样子的？“
看好了，我调换了两个平级子组件的位置：
看看结果：
结论：
平级子组件的同一生命周期执行顺序取决于子组件挂载在父组件中的位置！
嵌套型（就是俄罗斯套娃啦！）
上代码：
讯享网
来吧，看看结果，迫不及待~
请仔细看看输出结果，然后再看结论，给大脑一些思维时间 ~~~
结论：
不论子组件嵌套多少层，总是最外层（最大的父组件：App.vue）的生命周期created先执行，mounted最后执行，接下来便是向内一层（CompOne.vue）的生命周期created执行，接下来就是再向内一层（也就是第三层）的生命周期created执行，其次第三层的mounted执行，然后就是第二层的mounted了。
说的一大堆，给你看个输出图你就懂了：
是的，created生命周期又外到内一层层先执行，而mounted生命周期则由内到外接着一层层执行！
继续更新下~
今天有同学提议的”路由懒加载中生命周期执行顺序又会是怎样？“
首先定义好App.vue文件：
父组件需要重新定义喽：
讯享网
两个子组件依旧没有变动：
router.js文件我就不写了，用的懒加载，来看看结果：
防止你模糊，附赠非懒加载的平级组件的生命周期执行顺序：
嵌套条件下（代码跟探索2中的一样），只是路由我们使用了懒加载
代码就省略喽，重复太多了，给你结果~
附赠非路由懒加载条件下嵌套型组建的生命周期执行顺序结果：
是的，跟探索2结论一样。
最后，感谢热心同学，欢迎探讨~
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/174187.html