标签：htm device strong 演示 ali size content 打印 怎样
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的相关代码
标签：htm device strong 演示 ali size content 打印 怎样
原文地址：https://www.cnblogs.com/---godzilla---/p/11441172.html
