UniApp 生命周期详解：从启动到销毁的完整指南

目录

一、UniApp 生命周期体系概览

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

三、页面生命周期（Page）

四、组件生命周期（Vue 标准）

五、三者的执行顺序（场景示例）

六、最佳实践与避坑指南

---

一、UniApp 生命周期体系概览

UniApp 的生命周期分为三类：

1. 应用生命周期 - 管理整个 App 的启动、切换

2. 页面生命周期 - 控制单个页面的加载、渲染、隐藏

3. 组件生命周期 - Vue 组件的创建、更新、销毁

---

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

在 App.vue 中定义，监听整个应用的全局事件：

export default {onLaunch(options) {// 初始化完成时触发（全局只触发一次）console.log('App 启动', options)},onShow(options) {// 从后台切换到前台时触发console.log('App 进入前台', options)},onHide() {// 从前台切换到后台时触发console.log('App 进入后台')},onError(err) {// 脚本错误监听console.error('全局错误', err)}
}

适用场景：

• onLaunch：初始化全局数据（如用户登录状态）

• onShow：恢复应用时刷新数据

• onError：捕获全局异常

 

三、页面生命周期（Page）

在页面 .vue 文件中定义，控制页面级行为：

export default {onLoad(options) {// 页面加载时触发，接收路由参数console.log('页面加载', options.id)},onShow() {// 页面显示/切入前台时触发console.log('页面显示')},onReady() {// 页面初次渲染完成（DOM 就绪）console.log('页面就绪')},onHide() {// 页面隐藏/切入后台console.log('页面隐藏')},onUnload() {// 页面卸载（关闭或路由跳离）console.log('页面销毁')},onPullDownRefresh() {// 监听用户下拉刷新console.log('下拉刷新')}
}

 关键执行顺序：
onLoad → onShow → onReady →（用户操作）→ onHide → onUnload

 

四、组件生命周期（Vue 标准）

组件遵循 Vue 的生命周期，常用钩子：

export default {created() {// 组件实例创建完成（未挂载 DOM）},mounted() {// DOM 挂载完成（可操作 DOM）},updated() {// 数据更新导致 DOM 重新渲染},beforeDestroy() {// 组件销毁前（清理定时器/解绑事件）}
}

 

 

五、三者的执行顺序（场景示例）

当首次启动应用并打开页面时：

1. App.onLaunch → 应用初始化

2. App.onShow → 应用进入前台

3. Page.onLoad → 页面加载参数

4. Page.onShow → 页面显示

5. Component.created → 子组件创建

6. Page.onReady → 页面渲染完成

7. Component.mounted → 子组件挂载

 

 

六、最佳实践与避坑指南

1. 数据请求放在哪里？

• 初始数据：onLoad（可获取路由参数）

• 实时刷新：onShow（如返回页面时更新）

     2. 避免内存泄漏

• 在 onUnload 或 beforeDestroy 中销毁定时器、全局事件

    3. 页面跳转传参

• 使用 onLoad(options) 接收参数，而非 created

  onLoad(options) {this.id = options.id // 接收 url 参数 ?id=123
  }

 七、完整流程图（简化版）

启动应用 → App.onLaunch → App.onShow  ↓  
打开页面 → Page.onLoad → Page.onShow → Page.onReady  ↓  
切换后台 → Page.onHide → App.onHide  ↓  
返回前台 → App.onShow → Page.onShow  ↓  
关闭页面 → Page.onUnload → Component.beforeDestroy  

 

结语：
深入理解 UniApp 生命周期，能有效解决页面刷新、数据同步、资源管理等核心问题。建议在开发中结合具体场景选择钩子函数，并善用官方文档（UniApp 生命周期）进行调试。