vue3生命周期
简介:
在 Vue.js 3.x 版本中,由于引入了 Composition API,生命周期钩子函数发生了一些变化。下面是 Vue.js 3.x 中常用的生命周期钩子函数的执行顺序:
beforeCreate
:在实例初始化之后、数据观测 (data observation) 之前被调用。在这个阶段,组件实例还没有初始化,无法访问到 data
和 methods
。
created
:在实例创建完成后被立即调用。此时,可以访问到 data
和 methods
。
beforeMount
:在挂载开始之前被调用。在这个阶段,模板已经编译完成,但是还未渲染成真实的 DOM。可以进行一些初始化操作。
onBeforeMount
:在挂载开始之前被调用。与 beforeMount
的作用相同,只是命名不同。在 Vue 3.x 中,推荐使用 on
前缀的生命周期钩子函数。
mounted
:在挂载完成后被调用。此时,组件已经被渲染到真实的 DOM 中。可以进行 DOM 相关的操作,如调用第三方库、操作 DOM 元素等。
onMounted
:在挂载完成后被调用。与 mounted
的作用相同,只是命名不同。在 Vue 3.x 中,推荐使用 on
前缀的生命周期钩子函数。
beforeUpdate
:在数据更新之前被调用,发生在虚拟 DOM 重新渲染和打补丁之前。可以在该钩子函数中进行更新前的一些操作。
onBeforeUpdate
:在数据更新之前被调用,发生在虚拟 DOM 重新渲染和打补丁之前。与 beforeUpdate
的作用相同,只是命名不同。在 Vue 3.x 中,推荐使用 on
前缀的生命周期钩子函数。
updated
:在数据更新后被调用,发生在虚拟 DOM 重新渲染和打补丁之后。可以在该钩子函数中进行更新后的一些操作。
onUpdated
:在数据更新后被调用,发生在虚拟 DOM 重新渲染和打补丁之后。与 updated
的作用相同,只是命名不同。在 Vue 3.x 中,推荐使用 on
前缀的生命周期钩子函数。
beforeUnmount
:在卸载开始之前被调用。此时,组件实例还存在,但是即将被卸载。
onBeforeUnmount
:在卸载开始之前被调用。与 beforeUnmount
的作用相同,只是命名不同。在 Vue 3.x 中,推荐使用 on
前缀的生命周期钩子函数。
unmounted
:在卸载完成后被调用。此时,组件实例已经被销毁,所有的事件监听器和子组件被解绑,可以进行最终的清理工作。
onUnmounted
:在卸载完成后被调用。与 unmounted
的作用相同,只是命名不同。在 Vue 3.x 中,推荐使用 on
前缀的生命周期钩子函数。
官方文档
https://v3.vuejs.org/