Vue生命周期

一、概念

Vue 实例有一个完整的生命周期。

也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲 染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期

 

二、各个阶段

beforeCreate	组件实例被创建之初，组件的属性生效之前
created	组件实例已经完全创建，属性也绑定，但真实 dom 还没有生成，$el 还不可用
beforeMount	在挂载开始之前被调用：相关的 render 函数首次被调用
mounted	el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子【可多次调用】
beforeUpdate	组件数据更新之前调用，发生在虚拟 DOM 打补丁之前
updated	组件数据更新之后
beforeDestory	组件销毁前调用
destoryed	组件销毁后调用
activited	keep-alive 专属，组件被激活时调用
deadctivated	keep-alive 专属，组件被销毁时调用

用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 deactivated 钩子函数，命中缓存渲染后会执行 activated 钩子函数

 

三、包含子组件的父组件从创建到销毁过程中，Vue子组件和父组件生命周期的执行顺序

（1）加载渲染过程：

1. 父组件 beforeCreate

2. 父组件 created

3. 父组件 beforeMount |

4. 子组件 beforeCreate

5. 子组件 created

6. 子组件 beforeMount

7. 子组件 mounted |

8. 父组件 mounted

（2）更新过程

1. 父组件 beforeUpdate |

2. 子组件 beforeUpdate

3. 子组件 updated |

4. 父组件 updated

（3）销毁过程

1. 父组件 beforeDestroy

2. 子组件 beforeDestroy |

3. 子组件 destroyed

4. 父组件 destoryed |

四、Vue3中生命周期有什么变化

setup()	始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
onBeforeMount()	组件挂载到节点上之前执行的函数
onMounted() :	: 组件挂载完成后执行的函数
onBeforeUpdate()	组件更新之前执行的函数
onUpdated():	组件更新完成之后执行的函数
onBeforeUnmount()	组件卸载之前执行的函数
onUnmounted():	组件卸载完成后执行的函数
onActivated()	被包含在 中的组件，会多出两个生命周期钩子函数，被激活时执行；
onDeactivated()	比如从 A 组件，切换到 B 组件，A 组件消失时执行；
onErrorCaptured()	当捕获一个来自子孙组件的异常时激活钩子函数。