vue 子父组件周期顺序_父组件和子组件生命周期钩子执行顺序是什么？

加载页面执行步骤

1、父组件：beforeCreate -> created -> beforeMount

2、子组件：beforeCreate -> created -> beforeMount -> mounted

3、父组件：mounted

销毁组件执行步骤

1、父组件：beforeDestroy

2、子组件：beforeDestroy

3、子组件：destroyed

2、父组件：destroyed

验证效果（加载页面执行步骤）

index.vue

<template><!-- 首页 --><div class="views__home"><sub-model></sub-model></div>
</template><script>
import SubModel from './sub-model.vue'; // 子组件
export default {components: {SubModel},beforeCreate() {console.log('父组件', 'beforeCreate');},created() {console.log('父组件', 'created');},beforeMount() {console.log('父组件', 'beforeMount');},mounted() {console.log('父组件', 'mounted');}
};
</script><style lang="less" scoped></style>

sub-model.vue

<template><!-- 子组件 --><div class="views__home__sub-model"></div>
</template><script>
export default {beforeCreate() {console.log('子组件', 'beforeCreate');},created() {console.log('子组件', 'created');},beforeMount() {console.log('子组件', 'beforeMount');},mounted() {console.log('子组件', 'mounted');}
};
</script><style lang="less" scoped></style>

打印结果

验证效果（销毁组件执行步骤）

index.vue

<template><!-- 首页 --><div class="views__home"><sub-model></sub-model></div>
</template><script>
import SubModel from './sub-model.vue'; // 子组件
export default {components: {SubModel},beforeDestroy() {console.log('父组件', 'beforeDestroy');},destroyed() {console.log('父组件', 'destroyed');}
};
</script><style lang="less" scoped></style>

sub-model.vue

<template><!-- 子组件 --><div class="views__home__sub-model"></div>
</template><script>
export default {beforeDestroy() {console.log('子组件', 'beforeDestroy');},destroyed() {console.log('子组件', 'destroyed');}
};
</script><style lang="less" scoped></style>

打印结果