vue中父子组件的渲染顺序

以前一直以为Vue的组件加载顺序就是按官网Vue生命周期的图示顺序加载，直到有小伙伴问我，生命周期具体的加载顺序时，我才发现异步和同步加载是有区别的。

1. Vue生命周期图解
   cn.vuejs.org/v2/guide/in…
   
   
2. 同步引入子组件时，渲染顺序
   

   引入方式：
      import Page from  '@/components/page'

   加载阶段：
   父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

   更新阶段：
      父beforeUpdate->子beforeUpdate->子updated->父updated

   销毁阶段：
       父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

3. 异步引入子组件时，渲染顺序
   

   引入方式：
      const Page = () => import('@/components/page')
      或
       const Page = resolve => require(['@/components/page'], page)

   加载阶段：
      父beforeCreate->父created->父beforeMount->父mounted->子beforeCreate->子created->子beforeMount->子mounted

   更新阶段：
      父beforeUpdate->子beforeUpdate->子updated->父updated

   销毁阶段：
      父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

4.  从钩子的执行顺序可以看出，只有在组件的加载阶段，执行顺序会稍微有些不同，其更新阶段和销毁阶段，顺序是相同的。

相信大家都看出来区别在哪儿了吧，同步加载组件时，是按模板的顺序来加载组件的，在父组件编译完模板后，就开始加载子组件，等子组件完全加载完，再完成父组件vm属性的挂载（即整个页面加载完成）。异步组件加载时，因为子组件时异步加载的，所以会先把父组件的整个生命周期走完，再开始加载子组件。