uniapp中onLoad和onShow执行顺序？

Question

在使用 UniApp 开发跨平台应用时，`onLoad` 和 `onShow` 是页面生命周期中两个核心钩子函数。开发者常遇到的问题是：当页面首次加载或从后台切回时，`onLoad` 与 `onShow` 的执行顺序如何？特别是在页面跳转、返回或小程序冷启动等场景下，二者触发时机容易混淆。例如，为何 `onShow` 每次页面显示都会执行，而 `onLoad` 只在初始化时执行一次？理解它们的调用时序对数据刷新、接口请求优化至关重要。请结合实际路由跳转（如 navigateTo、redirectTo）说明其执行顺序及适用场景。

Answer 1

1. 页面生命周期钩子函数概述

在 UniApp 开发中，页面的生命周期由多个钩子函数组成，其中 onLoad 和 onShow 是最常被使用的两个。它们分别代表页面加载和页面显示的关键节点。

• onLoad：页面加载时触发，仅执行一次，可用于初始化参数接收与首次数据请求。
• onShow：每次页面显示时都会触发，包括冷启动、热启动、从后台切回、页面返回等场景。

理解这两个钩子的执行顺序和触发条件，是优化跨平台应用性能的基础。

2. 执行顺序分析：从页面打开到交互流程

我们通过以下典型路由操作来观察 onLoad 与 onShow 的调用逻辑：

操作场景	onLoad 是否执行	onShow 是否执行	执行顺序
首次进入页面（冷启动）	是	是	onLoad → onShow
使用 navigateTo 跳转至新页面	是（新页）	是（新页）	新页 onLoad → 新页 onShow
从B页返回A页（navigateBack）	否	是（A页）	A页 onShow
redirectTo 替换当前页	是（目标页）	是（目标页）	目标页 onLoad → onShow
小程序从后台切回前台	否	是	onShow
tabBar 切换页面	首次是，后续否	每次都是	首次：onLoad → onShow；后续：onShow
reLaunch 重启应用	是	是	onLoad → onShow
页面隐藏后再次可见（如弹窗关闭）	否	是	onShow
页面销毁后重新创建	是	是	onLoad → onShow
页面缓存未清除，直接返回	否	是	onShow

3. 深入机制：为何 onLoad 只执行一次？

UniApp 基于 Vue 框架并融合小程序运行机制，onLoad 对应的是页面实例的创建阶段。一旦页面被加载，其组件实例即被缓存（除非显式销毁），因此不会重复执行 onLoad。

而 onShow 属于视图层的“可见性”事件，由原生容器控制，只要页面进入前台展示状态，就会触发。这使得它非常适合用于：

• 刷新订单状态
• 更新消息红点
• 轮询位置信息
• 恢复播放器状态

export default {
  onLoad(options) {
    console.log('页面初始化', options);
    this.fetchInitialData(); // 初始数据请求
  },
  onShow() {
    console.log('页面显示');
    this.checkLoginStatus(); // 每次都检查登录态
    this.refreshOrderList(); // 刷新订单列表
  }
}

4. 路由跳转场景下的行为差异对比

不同路由 API 对页面生命周期的影响显著：

1. navigateTo：打开新页面，原页面保留在堆栈中 → 返回时触发原页面 onShow
2. redirectTo：关闭当前页，打开新页 → 当前页 onHide，新页执行 onLoad → onShow
3. switchTab：跳转 tabBar 页面，若已存在则不触发 onLoad，仅 onShow
4. navigateBack：回退页面，触发目标页 onShow，但不会重新 onLoad

这意味着开发者必须根据业务需求选择合适的钩子：

• 需要“一次性初始化”的逻辑放在 onLoad
• 需要“实时响应”的逻辑放在 onShow

5. 实际开发中的常见问题与解决方案

许多开发者误将频繁的数据拉取放在 onLoad 中，导致返回页面时数据未更新。正确做法应是：

错误示例：

onLoad() {
    this.getData(); // 返回时不执行！
  }

推荐方案：

onShow() {
    if (!this.isFirstLoad) {
      this.getData(); // 每次显示都检查更新
    } else {
      this.isFirstLoad = false;
    }
  }

6. 流程图：页面跳转与生命周期触发路径

graph TD
    A[启动应用] --> B{页面A}
    B -->|onLoad| C[初始化参数]
    B -->|onShow| D[页面显示]
    D --> E[navigateTo 页面B]
    E --> F{页面B}
    F -->|onLoad| G[加载数据]
    F -->|onShow| H[渲染界面]
    H --> I[返回页面A]
    I --> J{页面A}
    J -->|onShow| K[刷新UI/状态]
    K --> L[继续交互]

7. 性能优化建议与最佳实践

结合 onLoad 和 onShow 的特性，可制定如下策略：

• 避免在 onShow 中执行重型计算或重复请求，必要时加入防抖或时间戳判断
• 利用 Vuex 或全局变量记录上次刷新时间，减少无效接口调用
• 对于 Tab 页，考虑使用 <keep-alive> 缓存组件状态
• 监听页面 onHide 以暂停定时器、音频播放等资源消耗操作

示例代码：

onShow() {
  const now = Date.now();
  if (now - this.lastRefresh > 3000) {
    this.getData();
    this.lastRefresh = now;
  }
}