vue嵌套组件的生命周期

vue嵌套组件的生命周期

问：有A、B、C三个组件，A为B的父组件，B为C的父组件，它们的创建和挂载顺序是怎样的？即（beforeCreate/created，beforeMounte/mounted）的执行顺序

代码演示

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 8     <title>嵌套组件的生命周期</title>
 9 </head>
10 <body>
11     <div id="app">
12         <component-a />
13     </div>   
14  
15     <script>
16         Vue.component('component-a', {
17             template: '<div><component-b></component-b></div>',
18             beforeCreate () {
19                 console.log('beforeCreate: A');
20             },
21             created() {
22                 console.log('created: A');
23             },
24             beforeMount() {
25                 console.log('beforeMount: A');
26             },
27             mounted() {
28                 console.log('mounted: A');
29             },
30         });
31  
32         Vue.component('component-b', {
33             template: '<p><component-c></component-c></p>',
34             beforeCreate () {
35                 console.log('beforeCreate: B');
36             },
37             created() {
38                 console.log('created: B');
39             },
40             beforeMount() {
41                 console.log('beforeMount: B');
42             },
43             mounted() {
44                 console.log('mounted: B');
45             },
46         });
47  
48         Vue.component('component-c', {
49             template: '<span>hello world</span>',
50             beforeCreate () {
51                 console.log('beforeCreate: C');
52             },
53             created() {
54                 console.log('created: C');
55             },
56             beforeMount() {
57                 console.log('beforeMount: C');
58             },
59             mounted() {
60                 console.log('mounted: C');
61             },
62         });
63  
64         const app = new Vue({
65             el: '#app',
66             beforeCreate () {
67                 console.log('beforeCreate: Root');
68             },
69             created() {
70                 console.log('created: Root');
71             },
72             beforeMount() {
73                 console.log('beforeMount: Root');
74             },
75             mounted() {
76                 console.log('mounted: Root');
77             }
78         });
79     </script>
80 </body>
81 </html>

打印结果

 1 beforeCreate: Root
 2 created: Root
 3 beforeMount: Root
 4 beforeCreate: A
 5 created: A
 6 beforeMount: A
 7 beforeCreate: B
 8 created: B
 9 beforeMount: B
10 beforeCreate: C
11 created: C
12 beforeMount: C
13 mounted: C
14 mounted: B
15 mounted: A
16 mounted: Root

通过打印结果我们可以看到，beforeCreate、created、beforeMounted是按顺序执行，由外到内；而mounted即最终的挂载阶段则是由内到外，先将子组件挂载到dom上，然后再是父组件

为什么

其实想想就知道了，既然组件之间存在父子关系，即父嵌套子，那么子组件就相当于父组件的一部分，那肯定要先将其一部分先挂载到dom上，然后再将整个父组件挂载上去。

总结

父子组件嵌套的生命周期其实都是 先父后子 然后 先子后父。后续再加入update和destroy的相关代码

vue嵌套组件的生命周期

为什么

总结

猜你喜欢