Uniapp 生命周期详解：页面生命周期 vs 应用生命周期（附实战示例）

Uniapp 是一个基于 Vue.js 的跨平台开发框架，生命周期管理是其核心机制之一。它分为应用生命周期（整个 App 的全局钩子）和页面生命周期（单个页面的局部钩子）。理解这些钩子的执行顺序和用途，能帮助开发者优化性能、处理数据加载和状态管理。下面我将逐步详解两者的区别、钩子函数，并提供实战示例。

---

1. 应用生命周期

应用生命周期钩子定义在根组件 App.vue 中，作用于整个应用程序。它们在 App 启动、切换前后台时触发。常用钩子包括：

• onLaunch：App 首次启动时触发，用于初始化全局数据（如登录状态）。
• onShow：App 从后台切换到前台时触发（如用户返回 App）。
• onHide：App 从前台切换到后台时触发（如用户切换到其他 App）。
• onError：App 发生脚本错误时触发，用于错误监控。

特点：

• 全局性：影响整个 App。
• 执行顺序：onLaunch → onShow（首次启动）→ 后续 onShow/onHide（切换前后台）。
• 用途：处理 App 级事件，如全局配置、错误日志。

---

2. 页面生命周期

页面生命周期钩子定义在单个页面组件（如 pages/index/index.vue）中，作用于特定页面。它们在页面加载、显示、隐藏或卸载时触发。常用钩子包括：

• onLoad：页面加载时触发，用于获取路由参数（如 options）。
• onShow：页面显示时触发（如页面进入前台）。
• onReady：页面首次渲染完成时触发，用于操作 DOM。
• onHide：页面隐藏时触发（如页面跳转或切换到后台）。
• onUnload：页面卸载时触发（如页面被关闭），用于清理资源（如定时器）。
• onPu