深入解析 Uni-App 生命周期：从启动到销毁的全流程指南

Uni-App 作为一款基于 Vue.js 的跨平台开发框架，其生命周期管理是开发高质量应用的关键。本文将全面剖析 Uni-App 的生命周期，涵盖 应用生命周期、页面生命周期、组件生命周期，并结合实际开发场景，提供最佳实践和常见问题解决方案。

---

一、Uni-App 生命周期概述

Uni-App 的生命周期分为三个层次：

1. 应用生命周期：整个 App 从启动到退出的过程。
2. 页面生命周期：单个页面的加载、显示、隐藏和卸载。
3. 组件生命周期：Vue 组件的创建、挂载、更新和销毁。

理解这些生命周期有助于：

• 优化性能（如减少不必要的渲染）
• 管理数据（如页面跳转时保存状态）
• 处理异步任务（如网络请求的取消）
• 适配多端（处理不同平台的差异）

---

二、应用生命周期（App 级别）

Uni-App 的 App.vue 是整个应用的入口，其生命周期钩子如下：

生命周期钩子	触发时机	典型用途
onLaunch	应用首次启动时触发	初始化全局数据（如登录状态、系统信息）
onShow	应用从后台切换到前台	恢复数据、刷新页面
onHide	应用从前台进入后台	保存临时数据、清理资源
onError	发生脚本错误时触发	错误监控（如 Sentry 上报）
onUniNViewMessage	处理 nvue 页面通信	跨页面通信

代码示例

// App.vue
export default {
  onLaunch(options) {
    console.log('App 启动，场景值:', options.scene) // 微信小程序场景值
    uni.getSystemInfo({ // 获取设备信息
      success(res) {
        console.log('设备信息:', res)
      }
    })
  },
  onShow() {
    console.log('App 进入前台')
  },
  onHide() {
    console.log('App 进入后台')
  },
  onError(err) {
    console.error('全局错误:', err)
  }
}

注意事项

1. onLaunch 只会执行一次，除非用户手动杀掉 App 再启动。
2. onShow 和 onHide 适用于多任务切换场景（如 Android/iOS 后台运行）。
3. onError 只能捕获部分错误，建议结合 try-catch 使用。

---

三、页面生命周期（Page 级别）

Uni-App 的页面生命周期与 小程序 类似，但比 Vue 的组件生命周期更丰富：

生命周期钩子	触发时机	典型用途
onLoad	页面加载时触发（仅一次）	接收路由参数，初始化数据
onShow	页面显示时触发（每次进入）	刷新数据（如从后台返回）
onReady	页面初次渲染完成	操作 DOM（如获取元素尺寸）
onHide	页面隐藏时触发	暂停定时器、取消请求
onUnload	页面卸载时触发	清理全局事件监听
onPullDownRefresh	下拉刷新时触发	重新加载数据
onReachBottom	滚动到底部时触发	加载更多（分页）
onShareAppMessage	点击分享按钮时触发	自定义分享内容

代码示例

// pages/index/index.vue
export default {
  onLoad(options) {
    console.log('页面加载，参数:', options)
    this.fetchData()
  },
  onShow() {
    console.log('页面显示')
  },
  onReady() {
    console.log('页面渲染完成')
    this.initMap() // 操作 DOM
  },
  onHide() {
    console.log('页面隐藏')
    clearInterval(this.timer) // 清理定时器
  },
  onUnload() {
    console.log('页面卸载')
    uni.$off('customEvent') // 移除事件监听
  },
  onPullDownRefresh() {
    console.log('下拉刷新')
    this.refreshData().finally(() => {
      uni.stopPullDownRefresh() // 停止刷新动画
    })
  },
  onReachBottom() {
    console.log('触底加载')
    this.loadMoreData()
  },
  onShareAppMessage() {
    return {
      title: '分享标题',
      path: '/pages/index/index'
    }
  }
}

最佳实践

1. onLoad 适合初始化数据，但避免同步阻塞操作（如大文件读取）。
2. onShow 适合刷新数据，如从其他页面返回时更新列表。
3. onUnload 必须清理全局事件，否则可能导致内存泄漏。
4. onReachBottom 需防抖处理，避免重复请求。

---

四、组件生命周期（Vue 级别）

Uni-App 的组件遵循 Vue 2.x 生命周期，但需注意跨平台差异：

生命周期钩子	触发时机	典型用途
beforeCreate	实例初始化前	无法访问 this
created	实例创建完成	初始化非响应式数据
beforeMount	挂载前	极少使用
mounted	挂载完成	访问 DOM、发起请求
beforeUpdate	数据更新前	手动控制更新逻辑
updated	数据更新后	操作更新后的 DOM
beforeDestroy	实例销毁前	清理定时器、事件监听
destroyed	实例销毁后	极少使用

代码示例

export default {
  data() {
    return {
      count: 0
    }
  },
  created() {
    console.log('组件创建，但 DOM 未渲染')
  },
  mounted() {
    console.log('DOM 已挂载')
    this.timer = setInterval(() => {
      this.count++
    }, 1000)
  },
  beforeDestroy() {
    console.log('组件销毁前')
    clearInterval(this.timer)
  }
}

注意事项

1. mounted 在 H5 和微信小程序表现不同：
   • H5：DOM 已渲染，可操作。
   • 小程序：部分 DOM 操作可能不支持。
2. 避免在 created 操作 DOM，此时 DOM 未渲染。
3. beforeDestroy 必须清理资源，否则可能内存泄漏。

---

五、多端适配与常见问题

1. 生命周期差异

平台	特殊生命周期	说明
微信小程序	onPageScroll	监听页面滚动
App	onNavigationBarButtonTap	导航栏按钮点击
H5	onResize	窗口大小变化

2. 常见问题

Q1: onLoad 和 created 的区别？

• onLoad 是页面级，接收路由参数。
• created 是组件级，不涉及路由。

Q2: 如何避免重复数据加载？

// 方案1：使用缓存
onShow() {
  if (!this.dataLoaded) {
    this.fetchData()
  }
}

// 方案2：使用全局状态管理（Vuex/Pinia）

Q3: 如何在小程序获取 DOM？

mounted() {
  uni.createSelectorQuery().select('#element').boundingClientRect(res => {
    console.log('元素位置:', res)
  }).exec()
}

---

六、总结

Uni-App 的生命周期管理是开发的核心，合理使用能：
✅ 优化性能（减少不必要的渲染）
✅ 提升用户体验（如缓存数据、流畅跳转）
✅ 避免内存泄漏（正确清理资源）
✅ 适配多端（处理平台差异）

推荐实践：

1. onLoad 初始化数据，onShow 刷新数据。
2. beforeDestroy 清理定时器、事件。
3. onReachBottom 加分页防抖。
4. 使用 Vuex/Pinia 管理全局状态。

掌握生命周期，你的 Uni-App 开发将更加高效稳定！ 🚀