vue父子组件加载顺序

graph TB
A(父组件 beforeCreated) --> B(父组件 created) --> C(父组件 beforeMounted) --> D(子组件 beforeCreated) --> E(子组件 created) --> F(子组件 beforeMounted) --> G(子组件 mounted) --> H(父组件 mounted)

组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。

组件的销毁操作是先父后子，销毁完成的顺序是先子后父。

加载渲染过程

父 beforeCreate->父 created->父 beforeMount->子 beforeCreate->子 created->子 beforeMount- >子 mounted->父 mounted

子组件更新过程

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

父组件更新过程

父 beforeUpdate -> 父 updated

销毁过程

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