Vue2 的生命周期
| 声明周期 | 执行时机 |
|---|---|
beforeCreate | 在组件实例被创建之初、组件的属性⽣效之前被调用，属于初始化状态 |
created | 在组件实例已创建完毕。此时属性也已绑定，但模板没有编译，获取不到DOM |
beforeMount | 在组件挂载开始之前被调⽤。相关的 render 函数首次被调用，生成虚拟DOM |
mounted | 实例被挂载后调用，可以获取最新的DOM节点和数据 |
beforeUpdate | 在组件数据更新之前调⽤ |
update | 在组件数据更新之后被调用 |
activited | 在组件被激活时调⽤（使用了 的情况下） |
deactivated | 在组件被销毁时调⽤（使用了 的情况下） |
beforeDestory | 在组件销毁前调⽤（通常在这面解除一些全局或者自定义事件） |
destoryed | 实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁 |
Vue3 的生命周期：
| 声明周期 | 执行时机 |
|---|---|
setup | 开始创建组件之前，在 beforeCreate和 created之前执行，创建的是 data和 method |
onBeforeMount | 组件挂载到节点上之前执行的函数 |
onMounted | 组件挂载完成后执行的函数 |
onBeforeUpdate | 组件更新之前执行的函数 |
onUpdated | 组件更新完成之后执行的函数 |
onBeforeUnmount | 组件卸载之前执行的函数 |
onUnmounted | 组件卸载完成后执行的函数 |
onActivated | 在组件被激活时调⽤（使用了 的情况下） |
onDeactivated | 在组件被销毁时调⽤（使用了 的情况下） |
onErrorCaptured | 当捕获一个来自子孙组件的异常时激活钩子函数 |
对比：
# Vue2---------------Vue3
beforeCreate --> setup()
created --> setup()
beforeMount --> onBeforeMount
mounted --> onMounted
beforeUpdate --> onBeforeUpdate
updated --> onUpdated
beforeDestroy --> onBeforeUnmount
destroyed --> onUnmounted
activated --> onActivated
deactivated --> onDeactivated
errorCaptured --> onErrorCaptured