uniapp 生命周期
生命周期 分为三大类:
- 应用级
- 页面级
- 组件级
应用级生命周期
该生命周期函数,是对系统
初始化到启动完成,以及系统发生变化时,监听的函数。并且只对App.vue 文件内生效;
- 初始化完成时:
onLanch
.全局只会(触发一次) - app启动显示:
onShow
.包括从后台进入前天显示也触发 - app进入后台:
onHide
.页面进入了后台,用户切换了其他app - app系统出错:
onError
.app使用过程中发生报错 - app主题变化:
onThemeChange
.app切换了暗夜或者白天模式 - app分享跳转不存在:
onPageNotFound
.app分享跳转小程序之类时候页面不存在触发,uni自身api跳转不会触发
页面级生命周期
只对页面级的生效,也可以说只对路由配置下的index.vue生效。子组件是无法生效的;
- 页面开始加载:
onLoad
.在页面跳转携带参数,我们可以在这里获取到; - 每次页面显示在屏幕上:
onShow
.包括切换,回退等操作都会触发 - 页面初次渲染完成:
onReady
.可以拿到真实dom - 页面隐藏:
onHide
- 页面卸载:
onUnload
业务功能相关:
- 窗口尺寸变化:
onResize
.app 微信小程序支持 - 触发下来操作:
onPullDownRefresh
, 下拉刷新 - 滚动条到底部:
onReachBottom
向下滑动加载更多数据 - 页面开始滚动:
onPageScroll
滚动条就会触发,nvue页面不支持
注意点:
-
onPageScroll:里面不要写页面交互相关的代码。因为该生命周期在非H5端。是渲染层触发,每次滚动都会触发大佬钩子函数,就会频繁触发渲染层和逻辑层数据交换,可能会对页面卡顿,影响流畅度;
-
滚动时标题栏透明渐变
-
滚动吸顶固定某些元素
-
页面视觉滚动差 & 动画特效
面试官问时候
:可以单独在这里突出细节问题,比如:接受前同事代码,在某个页面有一个简单滚动需求,他就是用这个用这个钩子函数里面做交互出来,所有经常用户反馈这个页面爱卡顿,流畅慢,体验不好。后来我做了N方面的优化,让该页面恢复原生App一样的流程。用的方案是
- 在pages.json中配置titleNView下的type为transparent,替代 onPageScroll
组件级生命周期
只要是vue组件都是支持,并且和vue生命一模一样。
- 注意点:数据更新函数。updated & boforUpdate 只有H5支持;