Vue父子组件执行的生命周期顺序
1. 加载渲染过程
同步引入时生命周期顺序为:
父组件的beforeCreate
、created
、beforeMount
–> 所有子组件的beforeCreate
、created
、beforeMount
–> 所有子组件的mounted
–> 父组件的mounted
总结:父组件先创建,然后子组件创建;子组件先挂载,然后父组件挂载
若有孙组件呢?
父组件先beforeCreate
=> created
=> beforeMount
, 然后子组件开始beforeCreate
=>created
=>beforeMount
,然后孙组件beforeCreate
=> created
=>beforeMount
=> mounted
,孙组件挂载完成了,子组件mounted
,父组件再mounted
异步引入时生命周期顺序为:
父组件的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中会接收到这个数据。