Vue父子组件生命周期执行顺序

1.挂载阶段（初始化相关属性）

1. beforeCreate
2. created
3. beforeMount
4. mounted

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

一定得等子组件挂载完毕后，父组件才能挂在完毕，所以父组件的 mounted 在最后。

2.更新阶段（元素或组件的变更操作）

1. beforeUpdate
2. updated

注意：当父子组件有数据传递时，才有这个更新阶段执行顺序的比较。

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

3.销毁阶段（销毁相关属性）

1. beforeDestroy
2. destroyed

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

结合父子组件之后，一个完整的父子组件生命周期：

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted->父beforeUpdate->子beforeUpdate->子updated->父updated->父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

4.总结

Vue 父子组件生命周期钩子的执行顺序遵循：从外到内，再从内到外。

上代码

<!-- html部分 -->
<div id="app">
    <h1>app根组件</h1>
    <hr />
    <father></father>
</div>
<!-- 父组件 -->
<template id="father">
    <div>
        <h1>父组件</h1>
        <button id="destroy" @click="btnDestroy">销毁组件</button>
        <button id="update" @click="btnUpdate">更新组件</button>
        <hr />
        <child :msg="message"></child>
    </div>
</template>
<!-- 子组件 -->
<template id="child">
    <div>
        <h1>子组件</h1>
        <h3>{{msg}}</h3>
        <h3>{{childMsg}}</h3>
    </div>
</template>

// js部分
var child = {
    template: "#child",
    props: ["msg"],
    data() {
        return {
            childMsg: "子组件自己的信息",
        };
    },
    beforeCreate() {
        console.log("子组件————beforeCreate...");
    },
    created() {
        console.log("子组件————create...");
    },
    beforeMount() {
        console.log("子组件————beforeMount...");
    },
    mounted() {
        console.log("子组件————mounted...");
    },
    beforeUpdate() {
        console.log("子组件————beforeUpdate...");
    },
    updated() {
        console.log("子组件————updated...");
    },
    beforeDestroy() {
        console.log("子组件————beforeDestroy...");
    },
    destroyed() {
        console.log("子组件————destroyed...");
    },
};

Vue.component("father", {
    template: "#father",
    data() {
        return {
            message: "来自father组件的信息",
        };
    },
    components: {
        child,
    },
    beforeCreate() {
        console.log("父组件————beforeCreate...");
    },
    created() {
        console.log("父组件————create...");
    },
    beforeMount() {
        console.log("父组件————beforeMount...");
    },
    mounted() {
        console.log("父组件————mounted...");
    },
    beforeUpdate() {
        console.log("父组件————beforeUpdate...");
    },
    updated() {
        console.log("父组件————updated...");
    },
    beforeDestroy() {
        console.log("父组件————beforeDestroy...");
    },
    destroyed() {
        console.log("父组件————destroyed...");
    },
    methods: {
        btnDestroy() {
            //完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。
            //触发 beforeDestroy 和 destroyed 的钩子。
            // https://cn.vuejs.org/v2/api/#vm-destroy
            this.$destroy();
            console.log("销毁父子组件");
        },
        btnUpdate() {
            this.message = "变更父组件的信息";
            console.log(this.message);
        },
    },
});

var vm = new Vue({
    el: "#app",
    beforeCreate() {
        console.log("app根组件————beforeCreate...");
    },
    created() {
        console.log("app根组件————create...");
    },
    beforeMount() {
        console.log("app根组件————beforeMount...");
    },
    mounted() {
        console.log("app根组件————mounted...");
    },
    beforeUpdate() {
        console.log("app根组件————beforeUpdate...");
    },
    updated() {
        console.log("app根组件————updated...");
    },
    beforeDestroy() {
        console.log("app根组件————beforeDestroy...");
    },
    destroyed() {
        console.log("app根组件————destroyed...");
    },
});

5.补充：

页面A到页面B跳转的时候，发生了什么？

首先是先B组件先created然后beforeMount接着A组件才被销毁，A组件才执行beforeDestory，以及destoryed，最后B组件才开始mounted

即：B页面created>B页面beforeMount>A页面beforeDestory>A页面destoryed>B页面mounted