uniapp系列-uniappp都有哪些生命周期？

函数名说明平台差异说明最低版本onInit监听页面初始化其参数同 onLoad 参数为上个页面传递的数据参数类型为 Object用于页面传参触发时机早于 onLoad百度小程序3.1.0onLoad监听页面加载该钩子被调用时响应式数据、计算属性、方法、侦听器、props、slots 已设置完成其参数为上个页面传递的数据参数类型为 Object用于页面传参参考示例。onShow监听页面显示页面每次出现在屏幕上都触发包括从下级页面点返回露出当前页面onReady监听页面初次渲染完成此时组件已挂载完成DOM 树($el)已可用注意如果渲染速度快会在页面进入动画完成前触发onHide监听页面隐藏onUnload监听页面卸载onResize监听窗口尺寸变化App、微信小程序、快手小程序onPullDownRefresh监听用户下拉动作一般用于下拉刷新参考示例onReachBottom页面滚动到底部的事件不是scroll-view滚到底常用于下拉下一页数据。具体见下方注意事项onTabItemTap点击 tab 时触发参数为Object具体见下方注意事项微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序onShareAppMessage用户点击右上角分享微信小程序、QQ小程序、支付宝小程序、抖音小程序、飞书小程序、快手小程序、京东小程序onPageScroll监听页面滚动参数为Objectnvue不支持onNavigationBarButtonTap监听原生标题栏按钮点击事件参数为ObjectApp、H5onBackPress监听页面返回返回 event {from:backbutton、 navigateBack} backbutton 表示来源是左上角返回按钮或 android 返回键navigateBack表示来源是 uni.navigateBack详见app、H5、支付宝小程序onNavigationBarSearchInputChanged监听原生标题栏搜索输入框输入内容变化事件App、H51.6.0onNavigationBarSearchInputConfirmed监听原生标题栏搜索输入框搜索事件用户点击软键盘上的“搜索”按钮时触发。App、H51.6.0onNavigationBarSearchInputClicked监听原生标题栏搜索输入框点击事件pages.json 中的 searchInput 配置 disabled 为 true 时才会触发App、H51.6.0onShareTimeline监听用户点击右上角转发到朋友圈微信小程序2.8.1onAddToFavorites监听用户点击右上角收藏微信小程序、QQ小程序2.8.1onShareChat监听右上角菜单“分享到微信群组”按钮的行为小红书小程序刚学 uni-app 的时候最头疼的就是各种生命周期 —— 页面的、组件的、应用的一堆名字看着就晕不知道啥时候用哪个。今天我就用最通俗、最接地气的话把 uni-app 所有生命周期捋一遍哪些常用、用来干嘛、哪些不常用、为啥不用一次性说清楚新手直接照着用就行。先搞懂uni-app 有 3 大类生命周期不用死记硬背先分大类应用生命周期整个 APP 启动、关闭、切后台时触发整个项目只跑一次页面生命周期单个页面加载、显示、隐藏、返回时触发每个页面自己的组件生命周期vue 组件自己的创建、挂载、销毁和普通 vue 几乎一样下面一个一个说保证看完就会用。一、应用生命周期整个 APP 的生命周期位置写在App.vue里特点全局只执行一次不是每个页面都跑1. onLaunch常用 ✅什么时候触发APP 第一次启动时用来干嘛读取本地缓存token、用户信息初始化全局数据、全局配置检查更新、获取设备信息一句话项目启动第一件事就在这干2. onShow常用 ✅什么时候触发APP 启动、从后台切回前台用来干嘛切回 APP 时刷新数据重新登录态校验场景你切到微信再切回 APP想自动刷新页面就用它3. onHide不常用 ❌什么时候触发APP 切到后台为啥不常用大部分项目不需要处理后台行为除非要做暂停播放、停止定位这类特殊功能普通开发几乎用不上4. onError极少用 ❌出错时触发捕获全局错误新手基本用不到除非做错误日志上报二、页面生命周期最常用重点记这个位置写在各个页面.vue的script里这是我们日常开发 90% 会用到的生命周期1. onLoad超级常用 ✅✅✅什么时候触发页面第一次加载时只执行一次用来干嘛接收上个页面传过来的参数最最常用发送网络请求拿页面数据初始化页面变量例子onLoad(options) { // 接收页面传参 console.log(options.id) // 请求列表数据 this.getList() }一句话进页面要拿数据、要接收参数首选 onLoad2. onShow非常常用 ✅✅什么时候触发页面显示出来的时候切回页面、从别的页面返回都会触发用来干嘛列表页返回后刷新数据提交表单后回来刷新状态每次看到页面都要执行的逻辑区别 onLoadonLoad 只来一次onShow 每次显示都跑3. onReady常用 ✅什么时候触发页面初次渲染完成用来干嘛获取节点信息宽高、位置操作 DOM、操作 canvas、地图注意不能在 onLoad 里拿节点必须在 onReady4. onUnload一般常用 ✅什么时候触发页面卸载、返回、关闭页面用来干嘛清除定时器取消监听关闭 WebSocket、停止播放不写会导致内存泄漏、定时器还在跑、卡顿5. onHide偶尔用 ✅页面隐藏时触发场景暂停视频、停止动画、停止轮询下面这两个页面生命周期新手基本不用碰 ❌1. onResize屏幕旋转、窗口变化时触发不常用原因大部分移动端项目不做横竖屏适配用不上2. onPullDownRefresh / onReachBottom这两个不算生命周期是页面事件下拉刷新、上拉加载更多虽然常用但不属于生命周期范畴这里就不多说三、组件生命周期vue 自带的和普通 vue 完全一样在 uni-app 组件、页面里都能用1. created常用 ✅组件创建完毕能用 data、methods不能操作 DOM用来初始化数据、同步逻辑2. mounted常用 ✅组件挂载到页面可以操作 DOM用来获取节点、启动定时器、请求数据3. beforeDestroy /destroyed常用 ✅组件销毁前 / 后清除定时器、取消监听防止页面卡顿、内存泄漏其他beforeCreate、updated 等不常用 ❌日常业务几乎用不到只有复杂组件、编辑器、图表才会用到超清晰总结哪些生命周期必须背下来我给你整理成新手必背版直接记这几个就够开发 99% 项目 最常用必须会onLoad进页面请求数据、接收参数onShow每次显示页面都刷新onReady操作 DOM、获取节点onUnload清除定时器created、mounted组件初始化⚠️ 一般常用onLaunchAPP 启动初始化onHide页面隐藏暂停任务❌ 不常用不用记onResize应用生命周期里的 onError、onHide组件里的 updated、activated 等最简单的使用口诀新手必背进页面拿数据 →onLoad返回页面要刷新 →onShow要操作节点 →onReady页面关掉清定时器 →onUnload组件初始化 →created组件挂载操作 DOM →mounted最后uni-app 生命周期看着多其实页面生命周期是核心只要把onLoad、onShow、onReady、onUnload搞明白你写项目就已经完全够用了。