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

函数名	说明	平台差异说明	最低版本
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad	百度小程序	3.1.0+
onLoad	监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例。
onShow	监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用，注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	App、微信小程序、快手小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项	微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
onShareAppMessage	用户点击右上角分享	微信小程序、QQ小程序、支付宝小程序、抖音小程序、飞书小程序、快手小程序、京东小程序
onPageScroll	监听页面滚动，参数为Object	nvue不支持
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object	App、H5
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack；详见	app、H5、支付宝小程序
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	App、H5	1.6.0
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的"搜索"按钮时触发。	App、H5	1.6.0
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）	App、H5	1.6.0
onShareTimeline	监听用户点击右上角转发到朋友圈	微信小程序	2.8.1+
onAddToFavorites	监听用户点击右上角收藏	微信小程序、QQ小程序	2.8.1+
onShareChat	监听右上角菜单"分享到微信群组"按钮的行为	小红书小程序

刚学 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（超级常用 ✅✅✅）

什么时候触发：页面第一次加载时
只执行一次！
用来干嘛：
- 接收上个页面传过来的参数（最最常用）
- 发送网络请求拿页面数据
- 初始化页面变量
例子：

javascript 复制代码

onLoad(options) {
  // 接收页面传参
  console.log(options.id)
  // 请求列表数据
  this.getList()
}

一句话：进页面要拿数据、要接收参数，首选 onLoad

2. onShow（非常常用 ✅✅）

什么时候触发：页面显示出来的时候
切回页面、从别的页面返回都会触发
用来干嘛：
- 列表页返回后刷新数据
- 提交表单后回来刷新状态
- 每次看到页面都要执行的逻辑
区别 onLoad：onLoad 只来一次，onShow 每次显示都跑

3. onReady（常用 ✅）

什么时候触发：页面初次渲染完成
用来干嘛：
- 获取节点信息（宽高、位置）
- 操作 DOM、操作 canvas、地图
注意：不能在 onLoad 里拿节点，必须在 onReady

4. 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：组件初始化

⚠️ 一般常用

onLaunch：APP 启动初始化
onHide：页面隐藏暂停任务

❌ 不常用（不用记）

onResize
应用生命周期里的 onError、onHide
组件里的 updated、activated 等

最简单的使用口诀（新手必背）

进页面拿数据 → onLoad
返回页面要刷新 → onShow
要操作节点 → onReady
页面关掉清定时器 → onUnload
组件初始化 → created
组件挂载操作 DOM → mounted

最后

uni-app 生命周期看着多，其实页面生命周期是核心 ，只要把 onLoad、onShow、onReady、onUnload 搞明白，你写项目就已经完全够用了。