vue组件挂载顺序

组件关系

vue组件关系

实验代码


Test.vue

<template>
  <div>
    <test1></test1>
  </div>
</template>
<script>
  import Vue from 'vue'
  Vue.component('test1',{
    template:'<div><test2></test2><test3></test3><div>',
    beforeCreate(){
      console.log('test1 beforeCreate!')
    },
    created(){
      console.log('test1 created!')
    },
    beforeMount(){
    console.log('test1 beforeMount!')
  },
    mounted(){
      console.log('test1 mounted!')
    },
    beforeDestroy(){
      console.log('test1 beforeDestroy!')
    },
    destroyed(){
      console.log('test1 destroyed!')
    }
  })
  Vue.component('test2',{
    template:'<div><test4></test4><test5></test5><div>',
    beforeCreate(){
      console.log('test2 beforeCreate!')
    },
    created(){
      console.log('test2 created!')
    },
    beforeMount(){
      console.log('test2 beforeMount!')
    },
    mounted(){
      console.log('test2 mounted!')
    },
    beforeDestroy(){
      console.log('test2 beforeDestroy!')
    },
    destroyed(){
      console.log('test2 destroyed!')
    }
  })
  Vue.component('test3',{
    template:'<div><test6></test6><test7></test7><div>',
    beforeCreate(){
      console.log('test3 beforeCreate!')
    },
    created(){
      console.log('test3 created!')
    },
    beforeMount(){
      console.log('test3 beforeMount!')
    },
    mounted(){
      console.log('test3 mounted!')
    },
    beforeDestroy(){
      console.log('test3 beforeDestroy!')
    },
    destroyed(){
      console.log('test3 destroyed!')
    }
  })
  Vue.component('test4',{
    template:'<div><div>',
    beforeCreate(){
      console.log('test4 beforeCreate!')
    },
    created(){
      console.log('test4 created!')
    },
    beforeMount(){
      console.log('test4 beforeMount!')
    },
    mounted(){
      console.log('test4 mounted!')
    },
    beforeDestroy(){
      console.log('test4 beforeDestroy!')
    },
    destroyed(){
      console.log('test4 destroyed!')
    }
  })
  Vue.component('test5',{
    template:'<div><div>',
    beforeCreate(){
      console.log('test5 beforeCreate!')
    },
    created(){
      console.log('test5 created!')
    },
    beforeMount(){
      console.log('test5 beforeMount!')
    },
    mounted(){
      console.log('test5 mounted!')
    },
    beforeDestroy(){
      console.log('test5 beforeDestroy!')
    },
    destroyed(){
      console.log('test5 destroyed!')
    }
  })
  Vue.component('test6',{
    template:'<div><div>',
    beforeCreate(){
      console.log('test6 beforeCreate!')
    },
    created(){
      console.log('test6 created!')
    },
    beforeMount(){
      console.log('test6 beforeMount!')
    },
    mounted(){
      console.log('test6 mounted!')
    },
    beforeDestroy(){
      console.log('test6 beforeDestroy!')
    },
    destroyed(){
      console.log('test6 destroyed!')
    }
  })
  Vue.component('test7',{
    template:'<div><div>',
    beforeCreate(){
      console.log('test7 beforeCreate!')
    },
    created(){
      console.log('test7 created!')
    },
    beforeMount(){
      console.log('test7 beforeMount!')
    },
    mounted(){
      console.log('test7 mounted!')
    },
    beforeDestroy(){
      console.log('test7 beforeDestroy!')
    },
    destroyed(){
      console.log('test7 destroyed!')
    }
  })
  export default{

  }
</script>