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

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

• 1：父子组件之间共享了数据
• 2：数据是响应式，并且会存在更新

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

初始化

初始化数据

结论

父：beforeCreated created子 beforeCreate created

初始化渲染dom

父beforeMount子beforeMounte 子 mounted 父mounted

生命周期为什么这样执行

因为vue的模板需要经过编译处理，变为真的dom,

1:vue模板是更具初始化响应式数据生成虚拟dom

2:将虚拟dom编译为真的dom

3:编译过程分为编译开始和编译结束

编译特点：最先开始编译的最后编译完成

编译开始顺序：上层组件到下层组建的顺序

编译结束的顺序：下层组件到上层

又因为：beforeMounte created beforeCreated在编译的时候触发

Mouted在编译结束的时候触发

所以产生上诉的执行顺序

更新

结论

父beforeUpdate 子 beforeUpdate 子updated 父updated

为什么

当页面中绑定的响应式数据发生更新的时候

vue会重新编译

又因为beforeUpdate 是开始更新的时候执行，updated 是更新结束的时候执行，编译结束更新结束

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

销毁

结论

父beforeDestory 子beforeDestory 子Destoryed 父Destoryed

为什么

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

beforeDestory是销毁执行时触发，没有编译完成Destoryed已经销毁，编译结束

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