Uniapp vue2 和 Vue3 的 生命周期

简介: Uniapp vue2 和 Vue3 的 生命周期

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
相关文章
|
9天前
vue3【实战】语义化首页布局
vue3【实战】语义化首页布局
28 2
|
9天前
|
存储 容器
vue3【实战】来回拖拽放置图片
vue3【实战】来回拖拽放置图片
19 2
|
9天前
|
JavaScript 开发工具 开发者
vue3【提效】使用 VueUse 高效开发(工具库 @vueuse/core + 新增的组件库 @vueuse/components)
vue3【提效】使用 VueUse 高效开发(工具库 @vueuse/core + 新增的组件库 @vueuse/components)
32 1
|
9天前
|
API
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
19 1
|
9天前
|
JavaScript
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
17 1
|
9天前
|
JavaScript API
vue3【实用教程】组件(含父子组件传值 defineProps,自定义事件 defineEmits,defineProps,插槽 slot,动态组件 :is 等)
vue3【实用教程】组件(含父子组件传值 defineProps,自定义事件 defineEmits,defineProps,插槽 slot,动态组件 :is 等)
17 1
|
9天前
|
JavaScript 网络架构
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
48 0
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
|
4天前
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
6 0
|
4天前
|
JavaScript
【vue3】vue3中路由hash与History的设置
【vue3】vue3中路由hash与History的设置
9 0
|
4天前
|
编解码 前端开发
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
11 0