一次面试被问到的问题,第一次还确实有点懵逼,特此记录下来。

有组件A,组件B,组件C,组件C是组件B的子组件,组件B又是组件A的子组件,那么直观的层级结构如下:

1
2
3
ComponentA
--ComponentB
----ComponentC

问:他们之间生命周期函数的调用顺序是什么?

下面的代码表示上述结构,全局注册了三个组件Comp、childrenA 和 childrenB。在 childrenA 中引用 childrenB,在 Comp 中 引用 childrenA。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
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'
})

输出结果如下:

1
2
3
4
5
6
7
8
9
10
11
12
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嵌套组件生命周期执行顺序

完!


扫一扫关注我的公众号,第一时间接收最新文章,如果觉得文章对你有帮助,可以点个赞点个好看鼓励一下作者。

扫一扫关注我的公众号,第一时间接收最新文章
扫一扫关注我的公众号,第一时间接收最新文章