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 生命周期）进行调试。