Vue3 的生命周期函数

1.setup 取代 beforeCreate 和 created

vue3的组合式 api 中，setup 中的函数执行相当于在选项 api 中的 beforeCreate 和 created 中执行

---

2.组合式 api 的生命周期需引入使用

除了 beforeCreate 和 created 外，其他生命周期的使用都需要提前引入（轻量化）

---

3.可使用的生命周期

 除了 beforeCreate 和 created 被 setup 取代之外，选项式 api 和组合式 api 的映射如下：

创建阶段

beforeMount -> onBeforeMount，在挂载前被调用，此时还无法访问DOM

mounted -> onMounted，挂载完成后调用，此时可以正常访问页面DOM

更新阶段

beforeUpdate -> onBeforeUpdate，数据更新时调用，发生在虚拟 DOM 打补丁之前。此时内存中的数据已经被修改，但还没有更新到页面上，可以访问到旧的DOM

updated -> onUpdated，数据更新后调用，此时内存数据已经修改，页面数据也已经更新，可以访问到新的DOM

卸载阶段

beforeUnmount -> onBeforeUnmount，组件卸载前调用

unmounted -> onUnmounted，卸载组件实例后调用。

其他场景触发

errorCaptured -> onErrorCaptured，每当事件处理程序或生命周期钩子抛出错误时调用

renderTracked -> onRenderTracked，状态跟踪，vue3新引入的钩子函数，只有在开发环境有用，用于跟踪所有响应式变量和方法，一旦页面有 update ，就会跟踪他们并返回一个 event 对象

renderTriggered -> onRenderTriggered，状态触发，同样是vue3新引入的钩子函数，只有在开发环境有效，与 onRenderTracked 的效果类似，但不会跟踪所有的响应式变量方法，只会定点追踪发生改变的数据，同样返回一个 event 对象

activated -> onActivated，与 keep-alive 一起使用，当 keep-alive 包裹的组件激活时调用

deactivated -> onDeactivated，与 keep-alive 一起使用，当 keep-alive 包裹的组件停用时调用

参考文章：https://www.jianshu.com/p/7ae98973038b