概述

uni-app 基于 Vue.js 框架开发，其生命周期包含了三个层面：

• 应用生命周期：App.vue 的生命周期
• 页面生命周期：各个页面的生命周期
• Vue 组件生命周期：Vue.js 原生的组件生命周期

这三种生命周期在不同场景下会按特定顺序执行，理解它们的执行时机对于开发高质量的 uni-app 应用至关重要。

---

一、应用生命周期（App.vue）

应用生命周期在 App.vue 中定义，用于监听应用的启动、显示、隐藏等状态。

1.1 生命周期函数

函数名	说明	平台支持
onLaunch	当uni-app 初始化完成时触发（全局只触发一次）	全平台
onShow	当uni-app 启动，或从后台进入前台显示	全平台
onHide	当uni-app 从前台进入后台	全平台
onError	当uni-app 报错时触发	全平台
onUniNViewMessage	对nvue页面发送的数据进行监听	App
onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数	App
onPageNotFound	页面不存在监听函数	全平台
onThemeChange	监听系统主题变化	全平台

1.2 示例代码

// App.vue
<script>
export default {onLaunch: function(options) {console.log('App Launch', options);// 应用初始化完成// 可以在这里进行全局初始化操作},onShow: function(options) {console.log('App Show', options);// 应用从后台进入前台// 可以在这里刷新数据、重新建立连接等},onHide: function() {console.log('App Hide');// 应用从前台进入后台// 可以在这里保存数据、断开连接等},onError: function(err) {console.log('App Error:', err);// 应用发生错误// 可以在这里进行错误上报}
}
</script>

---

二、页面生命周期

页面生命周期在各个页面的 .vue 文件中定义，用于监听页面的加载、显示、隐藏等状态。

2.1 生命周期函数

函数名	说明	平台支持
onInit	监听页面初始化	百度小程序
onLoad	监听页面加载，其参数为上个页面传递的数据	全平台
onShow	监听页面显示。页面每次出现在屏幕上都触发	全平台
onReady	监听页面初次渲染完成	全平台
onHide	监听页面隐藏	全平台
onUnload	监听页面卸载	全平台
onResize	监听窗口尺寸变化	App、微信小程序
onPullDownRefresh	监听用户下拉动作	全平台
onReachBottom	页面滚动到底部的事件	全平台
onTabItemTap	点击 tab 时触发	微信小程序、支付宝小程序、百度小程序、H5、App
onShareAppMessage	用户点击右上角分享	微信小程序、百度小程序、字节跳动小程序、支付宝小程序
onPageScroll	监听页面滚动	全平台
onNavigationBarButtonTap	监听原生标题栏按钮点击事件	App、H5
onBackPress	监听页面返回	app、H5、支付宝小程序
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	App、H5
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件	App、H5
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件	App、H5
onShareTimeline	监听用户点击右上角转发到朋友圈	微信小程序
onAddToFavorites	监听用户点击右上角收藏	微信小程序

2.2 示例代码

// pages/index/index.vue
<script>
export default {data() {return {title: 'Hello'}},onLoad: function(options) {console.log('页面加载', options);// 页面加载时触发，可以获取上个页面传递的参数},onShow: function() {console.log('页面显示');// 页面显示/切入前台时触发},onReady: function() {console.log('页面初次渲染完成');// 页面初次渲染完成时触发},onHide: function() {console.log('页面隐藏');// 页面隐藏/切入后台时触发},onUnload: function() {console.log('页面卸载');// 页面卸载时触发},onPullDownRefresh: function() {console.log('下拉刷新');// 用户下拉刷新时触发// 需要在页面配置中开启enablePullDownRefresh},onReachBottom: function() {console.log('页面触底');// 页面滚动到底部时触发}
}
</script>

---

三、Vue 组件生命周期

uni-app 完全支持 Vue.js 的组件生命周期，这些生命周期在组件级别工作。

3.1 生命周期函数

函数名	说明	触发时机
beforeCreate	实例初始化之后，数据观测和事件配置之前	组件实例刚创建
created	实例创建完成后立即调用	数据观测、属性和方法的运算、事件回调已配置
beforeMount	在挂载开始之前被调用	render函数首次被调用前
mounted	实例被挂载后调用	el被新创建的vm.$el替换后
beforeUpdate	数据更新时调用	虚拟DOM重新渲染和打补丁前
updated	数据更新后调用	虚拟DOM重新渲染和打补丁后
activated	keep-alive组件激活时调用	组件被激活
deactivated	keep-alive组件停用时调用	组件被停用
beforeDestroy	实例销毁之前调用	实例仍完全可用
destroyed	实例销毁后调用	所有指令解绑、事件监听器移除、子实例销毁

3.2 示例代码

// 组件生命周期示例
<script>
export default {data() {return {message: 'Hello uni-app'}},beforeCreate() {console.log('beforeCreate - 实例初始化');},created() {console.log('created - 实例创建完成');// 在这里可以访问data、computed、methods等// 但还不能访问DOM},beforeMount() {console.log('beforeMount - 挂载前');},mounted() {console.log('mounted - 挂载完成');// 在这里可以访问DOM// 发起网络请求的好时机},beforeUpdate() {console.log('beforeUpdate - 更新前');},updated() {console.log('updated - 更新完成');},beforeDestroy() {console.log('beforeDestroy - 销毁前');// 清理工作：清除定时器、取消网络请求等},destroyed() {console.log('destroyed - 销毁完成');}
}
</script>

---

四、生命周期执行顺序

理解不同生命周期的执行顺序对于正确处理业务逻辑非常重要。

4.1 应用启动时的执行顺序

1. App.onLaunch         (应用启动)
2. App.onShow           (应用显示)
3. beforeCreate         (页面组件创建前)
4. created              (页面组件创建完成)
5. onLoad               (页面加载)
6. onShow               (页面显示)
7. beforeMount          (页面挂载前)
8. mounted              (页面挂载完成)
9. onReady              (页面初次渲染完成)

4.2 页面跳转时的执行顺序

从页面A跳转到页面B：

页面A:
1. onHide               (页面A隐藏)页面B:
2. beforeCreate         (页面B创建前)
3. created              (页面B创建完成)
4. onLoad               (页面B加载)
5. onShow               (页面B显示)
6. beforeMount          (页面B挂载前)
7. mounted              (页面B挂载完成)
8. onReady              (页面B初次渲染完成)

4.3 页面返回时的执行顺序

从页面B返回到页面A：

页面B:
1. onUnload             (页面B卸载)
2. beforeDestroy        (页面B销毁前)
3. destroyed            (页面B销毁完成)页面A:
4. onShow               (页面A重新显示)

4.4 应用进入后台/前台时的执行顺序

应用进入后台：

1. 当前页面.onHide      (当前页面隐藏)
2. App.onHide           (应用进入后台)

应用从后台回到前台：

1. App.onShow           (应用回到前台)
2. 当前页面.onShow      (当前页面显示)

五、最佳实践

5.1 各生命周期的使用场景

App.vue 生命周期

• onLaunch: 全局初始化、用户登录状态检查、配置初始化
• onShow: 应用从后台回到前台时的数据刷新
• onHide: 数据保存、连接断开

页面生命周期

• onLoad: 接收页面参数、初始化页面数据
• onShow: 页面数据刷新（每次显示都会执行）
• onReady: 获取页面元素、设置页面初始状态
• onHide: 暂停定时器、保存用户输入
• onUnload: 清理资源、取消网络请求

Vue 组件生命周期

• created: 数据初始化、事件监听器设置
• mounted: DOM操作、网络请求、第三方插件初始化
• beforeDestroy: 清理定时器、事件监听器、取消网络请求