vue嵌套組件的生命周期

本文轉載自查看原文 2019-09-01 00:18 347 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的相關代碼

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue組件的生命周期 vue組件的生命周期 Vue組件的生命周期 Vue之組件的生命周期 Vue組件的生命周期 vue組件生命周期 Vue 組件的生命周期 vue組件的生命周期 vue的組件和生命周期 Vue生命周期，及父子組件生命周期順序