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>

打印结果