Vue的生命周期大概分为创建前后、挂载前后、更新前后和销毁前后。
在Vue2中,生命周期钩子函数包括:beforeCreate(实例创建之前,可以做插件的一些初始化)、created(实例创建完成,可以访问数据或者获取接口数据)、beforeMount(模板编译之前)、mounted(模板编译之后,挂载到DOM节点上)、beforeUpdate(数据更新之前)、updated(数据更新之后)、beforeDestroy(实例销毁之前)和destroyed(实例销毁之后)。
而在Vue3中,生命周期钩子函数被重构为:onBeforeMount(代替了beforeMount)、onMounted(代替了mounted)、onBeforeUpdate(代替了beforeUpdate)、onUpdated(代替了updated)、onBeforeUnmount(代替了beforeDestroy)和onUnmounted(代替了destroyed)。此外,Vue3还引入了两个新的钩子函数:onActivated(当组件被激活时调用)和onDeactivated(当组件被停用时调用)。
以下是Vue2和Vue3生命周期钩子函数的详细对比:
Vue2生命周期钩子函数 | Vue3生命周期钩子函数 |
beforeCreate | onBeforeMount |
created | onMounted |
beforeMount | |
mounted | |
beforeUpdate | onBeforeUpdate |
updated | onUpdated |
beforeDestroy | onBeforeUnmount |
destroyed | onUnmounted |
activated | onActivated |
deactivated | onDeactivated |