面试：Vue.js嵌套组件生命周期执行顺序是什么？
一次面试被问到的问题，第一次还确实有点懵逼，特此记录下来。
有组件A，组件B，组件C，组件C是组件B的子组件，组件B又是组件A的子组件，那么直观的层级结构如下：
ComponentA
--ComponentB
----ComponentC问：他们之间生命周期函数的调用顺序是什么？
下面的代码表示上述结构，全局注册了三个组件Comp、childrenA 和 childrenB。在 childrenA 中引用 childrenB，在 Comp 中 引用 childrenA。
Vue.component('comp', {
template: '<div><children-a></children-a></div>',
beforeCreate() {
console.log('Comp beforeCreate')
},
created() {
console.log('Comp created')
},
beforeMount() {
console.log('Comp beforeMount')
},
mounted() {
console.log('Comp mounted')
},
})
Vue.component('childrenA', {
template: '<div><children-b></children-b></div>',
beforeCreate() {
console.log('--childrenA beforeCreate')
},
created() {
console.log('--childrenA created')
},
beforeMount() {
console.log('--childrenA beforeMount')
},
mounted() {
console.log('--childrenA mounted')
},
})
Vue.component('childrenB', {
template: '<div>{{text}}</div>',
data() {
return {
text: 'childrenB'
}
},
beforeCreate() {
console.log('----childrenB beforeCreate')
},
created() {
console.log('----childrenB created')
},
beforeMount() {
console.log('----childrenB beforeMount')
},
mounted() {
console.log('----childrenB mounted')
},
})
new Vue({
el: '#app'
})输出结果如下：
Comp beforeCreate
Comp created
Comp beforeMount
--childrenA beforeCreate
--childrenA created
--childrenA beforeMount
----childrenB beforeCreate
----childrenB created
----childrenB beforeMount
----childrenB mounted
--childrenA mounted
Comp mounted可以看到，先执行父级的beforeCreate、created 和 beforeMount，然后再去执行子组件的beforeCreate、created 和 beforeMount，如果子组件下面没有子组件了，就执行 mounted，然后再返回父级执行 mounted。
整个过程用图表示如下：
Vue嵌套组件生命周期执行顺序
Vue嵌套组件生命周期执行顺序
完！
本文代表个人观点，内容仅供参考。若有不恰当之处，望不吝赐教！
如果对你有一点点帮助，可以点个关注。
本文链接：https://zhangbing.site/2018/12/05/Vue-js嵌套组件生命周期执行顺序/。
作者简介：做工程不做码农(微信公众号同名)，Web前端工程师，7年开发经验，坐标杭州，聚焦大前端技术和技术成长的公众号，分享我的原创或精选文章，欢迎关注。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-12-05，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
作者已关闭评论
推荐阅读