简单整理了一下vue、小程序、uni-app的生命周期及其作用

简介: 简单整理了一下vue、小程序、uni-app的生命周期及其作用

Vue、小程序和uni-app都是前端框架或技术,它们有各自的生命周期。下面我将分别介绍它们的生命周期及其作用。

1. Vue的生命周期:

  - beforeCreate:实例被创建之前执行。

  - created:实例已经创建完成,可以进行数据观测和事件初始化等操作。

  - beforeMount:在挂载开始之前被调用,相关的render函数首次被调用。

  - mounted:el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。

  - beforeUpdate:数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前。

  - updated:由于数据更改导致虚拟DOM重新渲染和打补丁后调用。

  - beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。

  - destroyed:Vue实例销毁后调用。清理工作应该在这里进行。

  Vue的生命周期主要用于控制组件的初始化、数据变化、销毁等过程中的逻辑操作,例如在created钩子中进行数据初始化,在mounted钩子中进行DOM操作等。

2. 小程序的生命周期(以微信小程序为例):

  - onLoad:页面加载时触发。

  - onShow:页面显示时触发,每次打开页面都会触发。

  - onReady:页面初次渲染完成时触发。

  - onHide:页面隐藏时触发,如跳转到其他页面或底部导航切换时。

  - onUnload:页面卸载时触发。

  小程序的生命周期主要用于控制页面的初始化、显示、隐藏和销毁等过程中的逻辑操作,例如在onLoad中进行数据初始化,在onShow中进行数据更新等。

3. uni-app的生命周期:

  - beforeCreate:组件实例被创建之前执行。

  - created:组件实例已经创建完成,可以进行数据观测和事件初始化等操作。

  - beforeMount:在挂载开始之前被调用,相关的render函数首次被调用。

  - mounted:el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。

  - beforeUpdate:数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前。

  - updated:由于数据更改导致虚拟DOM重新渲染和打补丁后调用。

  - beforeDestroy:组件实例销毁之前调用。在这一步,组件实例仍然完全可用。

  - destroyed:组件实例销毁后调用。清理工作应该在这里进行。

  uni-app的生命周期与Vue的生命周期类似,用于控制组件的初始化、数据变化、销毁等过程中的逻辑操作。

总的来说,这些框架和技术的生命周期提供了一系列的钩子函数,用于控制组件或页面在不同阶段执行特定的逻辑代码,方便开发者进行初始化、数据管理和资源清理等操作。


目录
相关文章
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
729 1
|
4天前
|
移动开发 小程序 PHP
校园圈子论坛系统采取的PHP语音和uni账号开发的小程序APP公众号H5是否只需要4800元?是的,就是只需要4800元
关于校园圈子论坛系统采用PHP语言和uni-app开发的小程序、APP、公众号和H5是否仅需4800元这个问题,实际上很难给出一个确定的答案。这个价格可能受到多种因素的影响
|
7天前
|
缓存 移动开发 小程序
uni-vue3-wetrip自创跨三端(H5+小程序+App)酒店预订app系统模板
vue3-uni-wetrip原创基于vite5+vue3+uniapp+pinia2+uni-ui等技术开发的仿去哪儿/携程预约酒店客房app系统。实现首页酒店展示、预订搜索、列表/详情、订单、聊天消息、我的等模块。支持编译H5+小程序+App端。
42 8
|
25天前
|
监控 JavaScript 前端开发
vue学习第十二章(生命周期)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。本文深入探讨了Vue实例的生命周期,从初始化到销毁各阶段的关键钩子函数及其应用场景,帮助你更好地理解Vue的工作原理。如果你觉得有帮助,欢迎关注我,将持续分享更多优质内容!🎉🎉🎉
21 1
vue学习第十二章(生命周期)
|
22天前
|
移动开发 小程序
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
48 3
家政服务小程序APP开发,做好上门家政最快的方法是什么?
在家政服务领域,打造成功的平台并非易事。本文分享了三个关键步骤:避免初期盲目投入、采用低成本获客方式、建立有效的阿姨筛选机制。遵循这些方法,可助你避开常见陷阱,成为行业头部平台。
|
1月前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
2月前
|
JavaScript
Vue 的父组件和子组件生命周期钩子执行顺序
在 Vue 中,父组件和子组件的生命周期钩子执行顺序如下:
|
2月前
|
JavaScript
|
2月前
|
JavaScript
vue3 生命周期
【10月更文挑战第14天】vue3 生命周期

热门文章

最新文章