【Vue】零基础学习Vue: 第21课 Vue父子组件生命周期函数的执行顺序：

首先我们来看看生命周期函数执行顺序： 我们来看代码：

    
    vue组件
    
    




    
    
    





    //1.定义子组件one
    let one = {
        template:`
我是子组件1
`,
        created(){
            console.log(' 子组件1 created ')
        },
        beforeMount(){
            console.log(' 子组件1 beforeMount ')
        },
        mounted(){
            console.log(' 子组件1 mounted ')
        },
    }
    //1.定义子组件two
    let two = {
        template:'
我是子组件2
',
        created(){
            console.log(' 子组件2 created ')
        },
        beforeMount(){
            console.log(' 子组件2 beforeMount ')
        },
        mounted(){
            console.log(' 子组件2 mounted ')
        },
    }

    let vm = new Vue({
        el:'#app',  //这是根组件
        created(){
            console.log(' 根组件 created ')
        },
        beforeMount(){
            console.log(' 根组件 beforeMount ')
        },
        mounted(){
            console.log(' 根组件 mounted ')
        },
        //2.注册组件
        components:{
            one,
            two
        }
    })

  运行结果如下：