Lifecycle vue nested components
Q: A, B, C three components, A is the parent component B, and B is the parent component C, their order is created and mounted what? I.e. (beforeCreate / created, beforeMounte / mounted) execution sequence
Code demonstrates
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>
Print results
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
We can see the printed result by, beforeCreate, created, beforeMounted is executed in order from outside to inside; i.e. the mounted final stage is mounted from the inside to the outside, mounted to the first subassembly dom, then It is the parent component
why
In fact, think about the know, since there is a parent-child relationships between components, father of nested sub, then the equivalent part of the parent sub-assembly components, it must first be mounted to the first part of the dom, and then the whole parent component mount up.
to sum up
Father and son nested components are in fact the life cycle of my late father after the child and the first son after father . Was added and destroy subsequent update of the relevant code