在 Vue 3 中,生命周期函数已经被重新设计为钩子函数,并且与 Vue 2 中的生命周期函数有所不同,可以在 setup 函数中使用 onXXX 形式的钩子函数来执行对应的操作。以下是选项式 API 和组合式 API 中常用的几个钩子函数对比:
-
beforeCreate
:在实例被创建之前调用。此时,数据响应式和事件还未被设置。 -
created
:在实例创建完成后调用。此时,数据响应式已经完成,可以访问到实例的数据和方法。 -
beforeMount
:在模板编译/挂载之前调用。此时,模板被编译成虚拟 DOM,并准备好进行挂载。 -
mounted
:在模板编译/挂载完成后调用。此时,虚拟 DOM 已经挂载到页面上,可以操作 DOM 和访问 DOM 元素。 -
beforeUpdate
:在响应式数据更新之前调用。在此钩子函数中,可以进行数据的检查和修改。 -
updated
:在响应式数据更新完成后调用。此时,组件已经重新渲染,并且 DOM 也已经更新。 -
beforeUnmount
:在组件卸载之前调用。可以进行一些清理操作,如取消订阅、解绑事件等。 -
unmounted
:在组件卸载完成后调用。此时,组件实例已经销毁,可以进行垃圾回收和释放资源。
在 Vue 3 中,还引入了一个新的钩子函数 onRenderTracked
和 onRenderTriggered
,用于在渲染过程中跟踪和触发依赖项的变化。
需要注意的是,Vue 3 使用了 组合式 API ,其中的 setup
函数也可以被视为一个钩子函数。setup
函数在组件实例被创建之前执行,并且是设置组件的初始状态、响应式变量和监听器的地方。
虽然 Vue 3 对生命周期函数进行了重构,但大部分的使用场景和 Vue 2 中的生命周期函数相似,只是名称和一些细节上有所不同。可以根据具体的需求,在适当的钩子函数中执行相应的操作。
总结:Vue 3 中的生命周期函数被重新设计为钩子函数,并引入了一些新的钩子函数。在 setup
函数中也可以设置组件的初始状态和监听器。通过钩子函数,可以在不同的阶段执行特定的操作,以满足组件的需求。