Vue 的父子组件生命周期钩子执行顺序
文章类型:Vue
发布者:hp
发布时间:2023-03-17
一:主要分为渲染、更新、销毁三个部分
1:渲染顺序 (先父后子,完成顺序:先子后父)
子组件先挂载,然后到父组件
父 beforeCreate->父 created->父 beforeMount->子 beforeCreate->子 created->子 beforeMount->子 mounted->父 mounted
2:更新顺序 (父更新导致子更新,子更新完成后父)
子组件更新过程
父 beforeUpdate->子 beforeUpdate->子 updated->父 updated
父组件更新过程
父 beforeUpdate->父 updated
3:销毁顺序( 先父后子,完成顺序:先子后父)
父 beforeDestroy->子 beforeDestroy->子 destroyed->父 destroyed
二:原因
Vue创建过程是一个递归过程,先创建父组件,
有子组件就会创建子组件,因此创建时先有父组件再有子组件;
子组件首次创建时会添加mounted钩子到队列,等到patch结束再执行它们,
可见子组件的mounted钩子是先进入到队列中的,因此等到patch结束执行这些钩子时也先执行。