vue3生命周期_vue3.0项目开发（九）新特性之生命周期钩子函数

可以直接导入 onXX 开头的函数来注册生命周期钩子。

import { onMounted, onUpdated, onUnmounted } from 'vue'

onXX开头的生命周期函数只能在 setup 选项里面使用。

c

调用周期和之前的一样的，在 “onMounted” 和 “onBeforeMount” 函数里面界面渲染已经完成，可以访问DOM元素了。

与 2.x 版本生命周期相对应的组合式 API

• beforeCreate -> 使用 setup()
• created -> 使用 setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeDestroy -> onBeforeUnmount
• destroyed -> onUnmounted
• errorCaptured -> onErrorCaptured

但是我们依然可以使用2.x版本的生命周期函数，我们来看看如下代码：

上面的代码和2.x的生命周期和3.0版本的生命周期共存的，我们运行代码的话，能看到如下输出：

onBeforeMount > beforeMount > onMounted> mounted

可以看到setup选项的生命钩子是在2.x 版本的生命周期之前调用的。不过在它们里面都可以访问DOM元素了。

新增的钩子函数

除了和 2.x 生命周期等效项之外，组合式 API 还提供了以下调试钩子函数：

• onRenderTracked
• onRenderTriggered

两个钩子函数都接收一个 DebuggerEvent。

onRenderTriggered((DebuggerEvent) => {  // 检查哪个依赖性导致组件重新渲染 console.log(DebuggerEvent)})