Vue父子组件执行的生命周期顺序

1. 加载渲染过程

同步引入时生命周期顺序为：

 例子：import Page from '@/components/page'

父组件的beforeCreate、created、beforeMount–> 所有子组件的beforeCreate、created、beforeMount–> 所有子组件的mounted–> 父组件的mounted

总结：父组件先创建，然后子组件创建；子组件先挂载，然后父组件挂载

若有孙组件呢？

父组件先beforeCreate=> created=> beforeMount, 然后子组件开始beforeCreate=>created=>beforeMount，然后孙组件beforeCreate=> created=>beforeMount=> 　　mounted，孙组件挂载完成了，子组件mounted，父组件再mounted

异步引入时生命周期顺序为：

例子：const Page = () => import('@/components/page')
或者： const Page = resolve => require(['@/components/page'], page)

父组件的beforeCreate、created、beforeMount、mounted–> 子组件的beforeCreate、created、beforeMount、mounted

总结：父组件创建，父组件挂载；子组件创建，子组件挂载。

2. 子组件更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

3.父组件更新过程

父beforeUpdate->父updated

4.销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

应用场景:
最高层父组件的mounted中发起请求获取数据，通过vue的响应机制以props的形式传递到子组件，在子组件的mounted中拿到对应的props进行处理。这样做法要求父组件的mounted时机先于子组件的mounted,但事实是这样吗？显然不是。
原因:
子组件挂载完成后，父组件还未挂载。所以组件数据回显的时候，在父组件mounted中获取api的数据，子组件的mounted是拿不到的。
解决方案:
仔细看看父子组件生命周期钩子的执行顺序，会发现created这个钩子是按照从外内顺序执行，所以回显场景的解决方案是：在created中发起请求获取数据，依次在子组件的created中会接收到这个数据。