vue父子组件加载顺序

148 阅读3分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

挂载阶段

执行顺序为: 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

更新阶段

执行顺序为: 父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated

销毁阶段

执行顺序为: 父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

规律:父组件先开始执行,然后等到子组件执行完,父组件收尾。

举例

一.单组件和父子组件的相爱相杀

1.1 从单组件进入到父子组件(此处忽略更新操作且无缓存) 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount ->单组件beforeDestroy->单组件Destroyed-> 子mounted -> 父mounted

1.2 从单组件第一次进入到父子组件(此处忽略更新操作且父子组件开启缓存) 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount ->单组件beforeDestroy->单组件Destroyed-> 子mounted -> 父mounted->子缓存激活->父缓存激活

1.3 从父子组件进入单组件(此处忽略更新操作且无缓存) 单组件beforeCreate -> 单组件created -> 单组件beforeMount->父beforeDestroy->子beforeDestroy->子Destroyed->父Destroyed->单组件mounted

1.4 从父子组件返回单组件(此处忽略更新操作且父子组件开启缓存) 单组件beforeCreate -> 单组件created -> 单组件beforeMount->单组件mounted->子缓存失活->父缓存失活

二.一父两子一孙组件和上中下组件的相爱相杀(此处孙为two子的子)

2.1 从一父两子一孙组件进入到上中下组件(此处忽略更新操作且无缓存) 上beforeCreate -> 上created -> 上beforeMount -> 中beforeCreate -> 中created -> 中beforeMount -> 下beforeCreate -> 下created -> 下beforeMount->父beforeDestroy->one子beforeDestroy->one子Destroyed->two子beforeDestroy->孙beforeDestroy->two子Destroyed->父Destroyed->上mounted->中mounted->下mounted

2.2 从一父两子一孙组件进入到上中下组件(此处忽略更新操作且上中下组件开启缓存第一次进入) 上beforeCreate -> 上created -> 上beforeMount -> 中beforeCreate -> 中created -> 中beforeMount -> 下beforeCreate -> 下created -> 下beforeMount->父beforeDestroy->one子beforeDestroy->one子Destroyed->two子beforeDestroy->孙beforeDestroy->two子Destroyed->父Destroyed->上mounted->中mounted->下mounted->上激活缓存->中激活缓存->下激活缓存

2.3 从一父两子一孙组件进入到上中下组件(此处忽略更新操作且都开启缓存多次进入) one子失活缓存->孙失活缓存->two子失活缓存->父失活缓存->上激活缓存->中激活缓存->下激活缓存

2.4 从上中下组件进入到一父两子一孙组件(此处忽略更新操作且无缓存) 父beforeCreate -> 父created -> 父beforeMount->one子beforeCreate->one子created ->one子beforeMount->two子beforeCreate->two子created->two子beforeMount->孙beforeCreate->孙created->孙beforeMount->上beforeDestroy->上Destroyed->中beforeDestroy->中Destroyed->下beforeDestroy->下Destroyed->one子mounted->孙mounted->two子mounted->父mounted

2.5 从上中下组件进入到一父两子一孙组件(此处忽略更新操作且一父两子一孙开启缓存第一次进入) 父beforeCreate -> 父created -> 父beforeMount->one子beforeCreate->one子created ->one子beforeMount->two子beforeCreate->two子created->two子beforeMount->孙beforeCreate->孙created->孙beforeMount->上beforeDestroy->上Destroyed->中beforeDestroy->中Destroyed->下beforeDestroy->下Destroyed->one子mounted->孙mounted->two子mounted->父mounted->one子激活缓存-孙激活缓存->two子激活缓存->父激活缓存

2.6 从上中下组件进入到一父两子一孙组件(此处忽略更新操作且都开启缓存多次进入) 上失活缓存->中失活缓存->下失活缓存->one子激活缓存->孙激活缓存->two子激活缓存-父激活缓存