title: vue組件掛載順序
date: 2016-12-02

• vue組件掛載順序

本文通過(guò)實(shí)驗(yàn)介紹vue組件的掛載順序。

vue組件掛載順序

組件關(guān)系

vue組件關(guān)系

實(shí)驗(yàn)代碼

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>

實(shí)驗(yàn)結(jié)果

vue組件掛載結(jié)果

實(shí)驗(yàn)結(jié)論

1箱叁、vue組件生命周期可以分為準(zhǔn)備掛載蹂喻、掛載、銷毀三大塊
2鸿秆、準(zhǔn)備掛載與銷毀的順序?yàn)閺纳贤隆淖笸?br> 3怎囚、掛載的順序?yàn)閺南峦锨溥础淖笸?/p>

擴(kuò)展

下圖來(lái)源vue官網(wǎng)

vue生命周期

vue生命周期