title: vue组件挂载顺序
date: 2016-12-02

• vue组件挂载顺序

本文通过实验介绍vue组件的挂载顺序。

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>

实验结果

vue组件挂载结果

实验结论

1、vue组件生命周期可以分为准备挂载、挂载、销毁三大块
2、准备挂载与销毁的顺序为从上往下、从左往右
3、挂载的顺序为从下往上、从左往右

扩展

下图来源vue官网

vue生命周期

vue生命周期