vue 父子组件通讯时执行的生命周期的顺序

Vue的生命周期

Vue的生命周期分为三个阶段：初始化阶段，更新数据阶段，销毁实例阶段

1，初始化阶段：

• beforeCreate()实例创建前：数据和模板均未获取到
• created()实例创建后：最早可以访问到data数据，但模板未获取到
• beforeMount()挂载数据前：模板已经获取到，但是数据未挂载到模板上
• mounted()数据挂载后：数据已经挂载到模板中

2，更新数据阶段

• beforeUpdate() 模板更新前:data改变后,更新模板前调用
• updated()模板更新后:将data渲染到数据模板中

3，销毁实例阶段

• beforeDestory()实例销毁前
• destoryed()实例销毁后

生命周期图

 父子组件间通讯的生命周期执行顺序

1，初始化挂载阶段顺序

父beforeCreate() -> 父created() -> 父beforeMount() -> 子beforeCreate() -> 子created() -> 子beforeMount() -> 子mounted() -> 父mounted()

2，更新数据阶段（父传子）顺序

父beforeUpdate() -> 子beforeUpdate() -> 子updated() -> 父updated()

3，销毁阶段顺序

父beforeDestroy() -> 子beforeDestroy() -> 子destroyed() -> 父destroyed()