父子组件通信的生命周期

父子组件通信的时候触发的生命周期有哪些

• 1.父子组件之间共享了数据
• 2.数据是响应式,并且会才能在更新线上

  先说结果,在解释,为什么是这样结果

初始化

初始化数据

父 : beforeCreate created 子 : beforeCreate created

初始化渲染

父 :beforeMount 子 :beforeMount 子:mounted 父:mounted

生命周期为什么这么执行

因为 vue 的模板需要经过编译处理,变为真实的 DOM(js 文件)

1.Vue 模板是根据初始化响应式数据生成虚拟 DOM 2.将虚拟 DOM 编译为真实 DOM 3.编译过程分为编译开始和编译完成,

• 编译的特点: 最先开始编译的最后编译完成
• 编译开始顺序:上下层组件到下层组件的顺序
• 编译结束的顺序: 下层组件到生成

又因为: beforeMount created beforeCreate 在编译的时候就会触发

Mounted 在编译结束的时候触发

所有生产上述的执行顺序

更新

结论

父 : beforeUpdate updated 子 : beforeUpdate updated

为什么

当页面中绑定的响应式数据发生更新的时候
Vue 会从新编译页面

又因为 beforeUpdate 是开始更新的时候执行,updated 是结束更新时候执行,编译结束更新结束
根据上述的编译的特点,所以以上执行顺序

销毁

结论

父 : beforeDestroy destroyed 子 : beforeDestroy destroyed

为什么

销毁实际上是删除页面的 DOM 元素,Vue 的 api 底层操作都是虚拟 DOM, 操作 DOM,Vue 需要进行编译处理

beforeDestroy 是销毁执行时候触发,没有编译完成 destroyed 已经销毁,编译结束.

根据编译的特点,所以是以上执行顺序