vue嵌套组件的生命周期

Posted 2022-09-16 ---godzilla---

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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嵌套组件的生命周期的主要内容，如果未能解决你的问题，请参考以下文章