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

---

前言

提示：这里可以添加本文要记录的大概内容：

本文主要介绍了Vue父子组件的生命周期执行顺序，并且简单介绍了生命周期的概念

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、什么是生命周期

从Vue实例从创建、运行到销毁期间，总是伴随着各种各样的事件，这些事件统称为生命周期。
伴随vue的创建、运行到销毁，有八个重要的生命周期钩子函数，分别是
beforeCreate() 初始化之前执行
created() 初始化之后
beforeMount() 挂载到页面之前
mounted() 渲染到页面之后
beforeUpdate() 数据更新前
updated() 数据更新后
beforeDestroy() vue销毁前
destroyed()vue销毁后

二、执行顺序

1. 分别在父组件和子组件都打印生命周期

//父组件中在每个生命周期函数里都打印函数名字
 	beforeCreate() {
        console.log('beforeCreate')
    },
    created() {
        console.log('created')
    },
    beforeMount() {
        console.log('beforeMount')
    },
    mounted() {
        console.log('mounted')
    },
    beforeUpdate() {
        console.log('beforeUpdate')
    },
    updated() {
        console.log('updated')
    },
    beforeDestroy() {
        console.log('beforeDestroy')
    },
    destroyed() {
        console.log('destroyed')
    }

// 子组件中在每个生命周期函数里都打印函数名字----SON
 beforeCreate() {
        console.log('beforeCreate----SON')
    },
    created() {
        console.log('created----SON')
    },
    beforeMount() {
        console.log('beforeMount----SON')
    },
    mounted() {
        console.log('mounted----SON')
    },
    beforeUpdate() {
        console.log('beforeUpdate----SON')
    },
    updated() {
        console.log('updated----SON')
    },
    beforeDestroy() {
        console.log('beforeDestroy----SON')
    },
    destroyed() {
        console.log('destroyed----SON')
    }

2. 控制台中打印结果如下

3. 父子组件的生命周期执行顺序

可以看到父组件在渲染完成之后并不是马上挂载，而是先等待子组件创建、渲染、挂载完成之后再去挂载。

创建实例是从外到内的，渲染是从内到外的

（1）加载渲染过程：

父beforeCreate —> 父created —> 父beforeMount —> 子beforeCreate —> 子created —> 子beforeMount —> 子mounted —> 父mounted

（2）更新过程：

子组件中数据改变时：

父组件 beforeUpdate -> 子组件 beforeUpdate -> 子组件 updated -> 父组件 updated

父组件中数据改变时：

父组件 beforeUpdate -> 父组件 updated

（3）销毁过程：

父组件 beforeDestroy -> 子组件 beforeDestroy -> 子组件 destroyed -> 父组件 destroyed

---

总结

加载渲染阶段：

更新阶段：
销毁阶段：