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结束执行这些钩子时也先执行。