可以直接导入 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)})