Uni-app 生命周期全解析
目录
一、应用生命周期
二、页面生命周期
三、组件生命周期
四、应用场景总结
五、面试回答示例
在使用 uni-app 进行开发时，生命周期是面试和实际开发中经常遇到的问题。理解生命周期有助于我们更好地掌控应用运行的流程，从而实现更优雅的代码设计。本文将从 应用生命周期、页面生命周期、组件生命周期 三个方面来详细讲解。
一、应用生命周期
应用生命周期是指整个 App 级别的生命周期钩子，主要在 App.vue 中使用。
| 生命周期函数 | 触发时机 | 常见用途 |
|---|---|---|
| onLaunch | 应用初始化时触发（只会触发一次） | 初始化数据、登录态校验、获取设备信息 |
| onShow | 应用启动或从后台进入前台时触发 | 场景还原、统计上报、刷新数据 |
| onHide | 应用从前台进入后台时触发 | 数据持久化、本地存储 |
| onError | 应用报错时触发 | 错误日志收集、上报监控平台 |
示例代码：
// App.vue
export default {onLaunch() {console.log('App 启动了');},onShow() {console.log('App 显示了');},onHide() {console.log('App 隐藏了');},onError(err) {console.error('程序出错：', err);}
}
二、页面生命周期
页面生命周期是指某一个页面的运行过程中的钩子函数，主要在 pages 下的 .vue 文件中使用。
| 生命周期函数 | 触发时机 | 常见用途 |
|---|---|---|
| onLoad | 页面加载时触发，参数为上个页面传递的数据 | 接收参数、初始化数据请求 |
| onShow | 页面显示时触发 | 刷新页面数据、更新 UI |
| onReady | 页面初次渲染完成时触发（只触发一次） | 操作 DOM、初始化第三方库 |
| onHide | 页面隐藏时触发 | 暂停动画、停止视频播放 |
| onUnload | 页面卸载时触发 | 清理定时器、释放资源 |
| onPullDownRefresh | 用户下拉动作时触发 | 刷新页面数据 |
| onReachBottom | 页面滚动到底部时触发 | 上拉加载更多数据 |
| onResize | 屏幕旋转或窗口大小变化时触发 | 适配不同屏幕布局 |
| onTabItemTap | 点击 Tab 栏时触发（仅 Tab 页有效） | 切换 Tab 逻辑 |
示例代码：
// pages/index/index.vue
export default {onLoad(options) {console.log('页面加载', options);},onShow() {console.log('页面显示');},onReady() {console.log('页面初次渲染完成');},onHide() {console.log('页面隐藏');},onUnload() {console.log('页面卸载');},onPullDownRefresh() {console.log('用户下拉刷新');// 停止刷新uni.stopPullDownRefresh();},onReachBottom() {console.log('触底加载更多');}
}
三、组件生命周期
在 uni-app 中，组件的生命周期与 Vue 基本一致。常见的有：
| 生命周期函数 | 触发时机 |
|---|---|
| beforeCreate | 组件实例刚创建，还未初始化 data |
| created | 组件实例创建完成，可访问 data 和 methods |
| beforeMount | 组件挂载前 |
| mounted | 组件挂载完成，DOM 已可操作 |
| beforeUpdate | 数据更新前 |
| updated | 数据更新后 |
| beforeDestroy | 组件销毁前 |
| destroyed | 组件销毁完成 |
示例代码：
export default {data() {return {msg: 'Hello Uni-app'}},created() {console.log('组件已创建');},mounted() {console.log('组件挂载完成');},beforeDestroy() {console.log('组件销毁前');},destroyed() {console.log('组件已销毁');}
}
四、应用场景总结
-
onLaunch：做登录、全局配置初始化
-
onShow / onHide：常用于埋点统计、应用前后台切换逻辑
-
onLoad：页面参数接收、数据请求
-
onPullDownRefresh / onReachBottom：常用于分页加载、数据刷新
-
组件生命周期：常用于 DOM 操作、第三方插件初始化、清理资源
五、面试回答示例
如果面试官问到 uni-app 生命周期，可以这样回答：
应用生命周期：onLaunch（初始化）、onShow（前台显示）、onHide（后台）、onError（错误处理）。
页面生命周期：onLoad（参数获取）、onShow（页面展示）、onReady（首次渲染）、onHide、onUnload，还有下拉刷新、上拉加载、屏幕旋转等。
组件生命周期：基本与 Vue 保持一致，如 created、mounted、updated、destroyed。