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的相关代码
原文地址：https://www.cnblogs.com/---godzilla---/p/11441172.html
时间： 2024-10-06 21:03:55