IT评测·应用市场-qidao123.com

标题: 【uni-app】uniapp页面与组件生命周期先容 [打印本页]

作者: 莱莱 时间: 2024-6-27 20:15
标题: 【uni-app】uniapp页面与组件生命周期先容
uniapp应用开发过程中经常会在差别的时机触发一些事件，这篇文章主要是总结一下uniapp常用的一些生命周期钩子。
差别的环境运行可能有差异,下图为微信小步伐执行图示

1. 应用生命周期

函数名说明onLaunch当uni-app 初始化完成时触发（全局只触发一次）onShow当 uni-app 启动，或从后台进入前台显示onHide当 uni-app 从前台进入后台onError当 uni-app 报错时触发onUniNViewMessage对 nvue 页面发送的数据举行监听，可参考 nvue 向 vue 通讯onUnhandledRejection对未处理的 Promise 拒绝事件监听函数（2.8.1+）onPageNotFound页面不存在监听函数onThemeChange监听体系主题变革 2. 页面生命周期

函数名说明onLoad监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例onShow监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面onReady监听页面初次渲染完成。注意如果渲染速率快，会在页面进入动画完成前触发onHide监听页面隐藏onUnload监听页面卸载onResize监听窗口尺寸变革onPullDownRefresh监听用户下拉动作，一般用于下拉刷新，参考示例onReachBottom页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项onTabItemTap点击 tab 时触发，参数为Object，具体见下方注意事项onShareAppMessage用户点击右上角分享onPageScroll监听页面滚动，参数为ObjectonNavigationBarButtonTap监听原生标题栏按钮点击事件，参数为ObjectonBackPress监听页面返回onNavigationBarSearchInputChanged监听原生标题栏搜索输入框输入内容变革事件onNavigationBarSearchInputConfirmed监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。onNavigationBarSearchInputClicked监听原生标题栏搜索输入框点击事件onShareTimeline监听用户点击右上角转发到朋友圈onAddToFavorites监听用户点击右上角收藏 3. 组件主要用到的生命周期

在加载顺序上，uniapp中的页面生命周期函数会优先于组件的生命周期函数执行。这意味着页面的onLoad和onReady会在任何子组件的created和mounted之前调用。这是因为页面生命周期与整个页面的加载和渲染相干联，而组件的生命周期则关注于组件自身的初始化和挂载过程。
因此，如果你有依赖于页面特定状态的操作（如获取页面参数），应该在页面的onLoad或onReady中举行，而组件内部的状态初始化和DOM操作则应在created或mounted中处理。
3.1 Vue2 页面及组件生命周期流程图

3.2 Vue3 页面及组件生命周期流程图

4. 生命周期执行顺序

onLoad此时页面还未显示，没有开始进入的转场动画，页面dom还不存在。比较适合的操作是：接受上页的参数，联网取数据，更新data
onReady后，页面元素就可以自由操作了，比如ref获取节点。同时首批界面也渲染了

Page页面生命周期函数执行顺序
beforeCreate => onLoad => onShow => created => beforeMount => onReady => mounted
刷新数据后
beforeUpdate => updated

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)