vue,小程序,uni-app的生命周期?

简介: vue,小程序,uni-app的生命周期?

Vue、小程序和Uni-App都有各自的生命周期,下面是它们的生命周期介绍:

Vue 的生命周期

Vue 的生命周期分为创建、挂载、更新和销毁四个阶段,具体的生命周期函数如下:

  1. beforeCreate:实例刚在内存中被创建出来,此时还没有初始化好 data 和 methods 属性。
  2. created:实例已经在内存中创建完成,data 和 methods 属性已经完成初始化。可以进行数据的操作,如异步请求数据。
  3. beforeMount:在挂载开始之前被调用,此时 Vue 实例的模板已经编译完成,但尚未挂载到页面中。
  4. mounted:实例挂载到页面后调用,此时可以进行 DOM 操作,如获取元素节点。
  5. beforeUpdate:数据更新之前调用,发生在虚拟 DOM 重新渲染和打补丁之前。可以在该钩子中进行更新前的操作。
  6. updated:数据更新之后调用,发生在虚拟 DOM 重新渲染和打补丁之后。可以在该钩子中进行更新后的操作。
  7. beforeDestroy:实例销毁之前调用。在这个阶段,实例仍然完全可用。
  8. destroyed:实例销毁后调用。此时,Vue 实例的所有指令、事件监听器都已经被移除,组件也会被销毁。

小程序的生命周期

小程序的生命周期分为创建、更新和销毁三个阶段,具体的生命周期函数如下:

  1. onLoad:页面加载时触发,可以获取页面参数。
  2. onShow:页面显示/切入前台时触发,每次打开页面都会触发。
  3. onReady:页面初次渲染完成时触发,可以进行页面元素操作。
  4. onHide:页面隐藏/切入后台时触发。
  5. onUnload:页面卸载时触发。
  6. onPullDownRefresh:用户下拉刷新时触发。
  7. onReachBottom:页面上拉触底时触发。
  8. onShareAppMessage:用户点击右上角分享时触发。

Uni-App 的生命周期

Uni-App 的生命周期与 Vue 的生命周期基本一致,除了增加了一些平台特有的生命周期函数,具体的生命周期函数如下:

  1. onLaunch:应用初始化时触发,全局只触发一次。
  2. onShow:应用启动或从后台进入前台时触发。
  3. onHide:应用从前台进入后台时触发。
  4. onError:应用发生脚本错误或 API 调用失败时触发。
  5. onUniNViewMessage:接收从 nvue 页面发送过来的数据。

需要注意的是,Uni-App 是基于 Vue 的跨平台框架,所以它的生命周期函数与 Vue 的生命周期函数大部分是一致的。而小程序是一种独立的开发框架,其生命周期函数与 Vue 和 Uni-App 有所不同。

相关文章
|
1月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
482 7
|
1月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
530 1
家政服务小程序APP开发,做好上门家政最快的方法是什么?
在家政服务领域,打造成功的平台并非易事。本文分享了三个关键步骤:避免初期盲目投入、采用低成本获客方式、建立有效的阿姨筛选机制。遵循这些方法,可助你避开常见陷阱,成为行业头部平台。
|
18天前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
1月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
215 3
|
14天前
|
小程序 测试技术
上门家政维修系统软件开发,一套类似啄木鸟维修的小程序APP只要3000你敢信?
在数字化商业时代,一款名为“啄木鸟维修”的小程序 APP 以 3000 元的价格亮相,引发了广泛关注。这款 APP 功能全面,支持自营或入驻模式,提供完善的售后服务和详细的运营策略,开发周期仅需 3-5 天。它是否物超所值,还需用户自行判断,但其在市场中的表现确实引人注目。
|
1月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
319 0
|
移动开发 JavaScript 小程序
uni-app与Vue的区别
uni-app与Vue的区别
358 0
|
1月前
|
JavaScript 前端开发 小程序
uniapp一个人开发APP关键步骤和考虑因素
uniapp一个人开发APP关键步骤和考虑因素
122 1
uniapp一个人开发APP关键步骤和考虑因素
|
1月前
|
JavaScript 前端开发 UED
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
71 9