vue父子组件在不同情况下生命周期的执行顺序

挂载阶段

执行顺序为：
父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子激活缓存-父激活缓存