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

1. 加载渲染过程

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

父组件的beforeCreatecreatedbeforeMount–> 所有子组件的beforeCreatecreatedbeforeMount–> 所有子组件的mounted–> 父组件的mounted
Vue父子组件执行的生命周期顺序

总结:父组件先创建,然后子组件创建;子组件先挂载,然后父组件挂载

若有孙组件呢?

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

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

父组件的beforeCreatecreatedbeforeMountmounted–> 子组件的beforeCreatecreatedbeforeMountmounted

总结:父组件创建,父组件挂载;子组件创建,子组件挂载。

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中会接收到这个数据。