vue3和vue2的生命周期对比
时间: 2023-09-16 13:06:43 浏览: 50
Vue 3 和 Vue 2 的生命周期有一些变化和优化。下面是它们的对比:
1. 创建阶段:
- Vue 2:beforeCreate -> created
- Vue 3:beforeCreate -> onBeforeMount -> created -> onMounted
2. 更新阶段:
- Vue 2:beforeUpdate -> updated
- Vue 3:beforeUpdate -> onBeforeUpdate -> updated -> onUpdated
3. 销毁阶段:
- Vue 2:beforeDestroy -> destroyed
- Vue 3:onBeforeUnmount -> beforeUnmount -> onUnmounted
4. 新增的阶段:
- Vue 3 引入了两个新的生命周期钩子函数:
- onBeforeMount: 在挂载之前调用,类似于 Vue 2 的 beforeMount。
- onBeforeUpdate: 在更新之前调用,类似于 Vue 2 的 beforeUpdate。
5. 移除的阶段:
- Vue 3 移除了 beforeMount 和 beforeUpdate 这两个生命周期钩子函数,将它们替换为了新增的钩子函数。
总体上,Vue 3 的生命周期相对于 Vue 2 更加细致和灵活,提供了更多的钩子函数来处理不同的场景。这些变化使得开发者能够更好地控制组件的生命周期,提高了代码的可读性和可维护性。
相关问题
vue2生命周期和uniapp生命周期对比
Vue2的生命周期和Uniapp的生命周期有一些相似之处,但也存在一些差异。下面是它们的对比:
Vue2的生命周期包括以下阶段:
1. beforeCreate:实例刚在内存中创建,数据观测和事件配置之前。
2. created:实例已经创建完成,数据观测和事件配置完成。
3. beforeMount:模板编译/挂载之前。
4. mounted:模板编译/挂载完成,实例已经挂载到DOM上。
5. beforeUpdate:数据更新之前,虚拟DOM重新渲染之前。
6. updated:数据更新完成,虚拟DOM重新渲染完成。
7. beforeDestroy:实例销毁之前,清除定时器、解绑事件等操作。
8. destroyed:实例销毁完成。
Uniapp的生命周期与Vue2的生命周期类似,但有一些额外的生命周期钩子函数:
1. onLaunch:小程序初始化时触发,全局只触发一次。
2. onShow:小程序启动或从后台进入前台显示时触发。
3. onHide:小程序从前台进入后台时触发。
4. onError:小程序发生脚本错误或API调用失败时触发。
5. onPageNotFound:小程序找不到页面时触发。
Uniapp还支持页面级别的生命周期钩子函数,包括:
1. onLoad:页面加载时触发。
2. onReady:页面初次渲染完成时触发。
3. onUnload:页面卸载时触发。
4. onPullDownRefresh:用户下拉刷新时触发。
5. onReachBottom:页面上拉触底时触发。
6. onShareAppMessage:用户点击右上角分享时触发。
vue2和vue3的生命周期
Vue2和Vue3的生命周期有一些不同之处。在Vue2中,常见的生命周期包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed。而在Vue3中,生命周期发生了一些变化。在Vue3中,新增了两个生命周期函数:setup和onUnmounted,同时删除了beforeCreate、beforeMount、beforeUpdate和destroyed这些生命周期函数。在Vue3中,setup函数被用来替代beforeCreate和created,在该函数中进行组件的初始化工作。onUnmounted函数则用于替代beforeDestroy,在该函数中进行组件的清理工作。此外,mounted、updated和beforeUpdate这些生命周期函数在Vue3中保持不变。总体来说,Vue3的生命周期相对于Vue2来说更加简洁和灵活。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue2vue3生命周期详解](https://blog.csdn.net/qq_51649346/article/details/126977258)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]