Uniapp onLoad 和 onShow 区别

一、核心区别

生命周期	触发时机	执行次数	参数获取
onLoad	页面首次创建时触发	仅1次	支持获取URL参数options
onShow	页面每次显示时触发（包括返回）	多次	无法获取URL参数

二、实战数据请求场景

优先使用onLoad请求数据的场景：

1. 初始化数据
   当需要根据URL参数初始化页面时（如商品详情页的ID）：

   onLoad(options) {
     // 获取URL参数（如：/pages/detail?id=123）
     const id = options.id; 
     this.loadProductDetail(id); // 根据ID请求数据
   }
   

2. 静态数据加载
   只需加载一次且不会变化的数据（如文章内容、配置信息）：

   onLoad() {
     this.fetchArticleContent(); // 文章内容不会频繁更新
   }
   

3. 耗时初始化操作
   需要提前执行的复杂计算或大数据请求：

   onLoad() {
     this.initMapData(); // 加载地图数据（只需一次）
   }
   

应使用onShow的场景：

onShow() {
  // 1. 需要实时更新的数据（如购物车数量）
  this.refreshCartCount(); 
  
  // 2. 从编辑页返回时刷新列表
  if (this.isFromEditPage) {
    this.reloadList();
  }
}

三、决策流程图

graph TD
A[需要数据吗？] --> B{是否依赖URL参数？}
B -->|是| C[使用onLoad]
B -->|否| D{数据需要实时更新？}
D -->|是| E[使用onShow]
D -->|否| F[使用onLoad]

四、最佳实践建议

1. 组合使用方案

   onLoad(options) {
     // 初始化核心数据（依赖参数）
     this.loadCoreData(options.id); 
   }
   onShow() {
     // 补充实时数据（如用户状态）
     this.updateUserStatus(); 
   }
   

2. 避免在onShow中重复请求
   通过缓存机制防止返回页面时重复加载：

   data() {
     return { hasLoaded: false }
   },
   onLoad() {
     this.loadData();
     this.hasLoaded = true;
   },
   onShow() {
     if (!this.hasLoaded) this.loadData();
   }
   

关键结论：当数据请求依赖URL参数或只需加载一次时，优先使用onLoad；需要响应页面可见性变化时使用onShow。两者配合使用可兼顾初始化效率和实时性需求。