一、核心区别
生命周期 | 触发时机 | 执行次数 | 参数获取 |
---|---|---|---|
onLoad | 页面首次创建时触发 | 仅1次 | 支持获取URL参数options |
onShow | 页面每次显示时触发(包括返回) | 多次 | 无法获取URL参数 |
二、实战数据请求场景
优先使用onLoad
请求数据的场景:
初始化数据
当需要根据URL参数初始化页面时(如商品详情页的ID):onLoad(options) {// 获取URL参数(如:/pages/detail?id=123)const id = options.id; this.loadProductDetail(id); // 根据ID请求数据 }
静态数据加载
只需加载一次且不会变化的数据(如文章内容、配置信息):onLoad() {this.fetchArticleContent(); // 文章内容不会频繁更新 }
耗时初始化操作
需要提前执行的复杂计算或大数据请求: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]
四、最佳实践建议
组合使用方案
onLoad(options) {// 初始化核心数据(依赖参数)this.loadCoreData(options.id); } onShow() {// 补充实时数据(如用户状态)this.updateUserStatus(); }
避免在
onShow
中重复请求
通过缓存机制防止返回页面时重复加载:data() {return { hasLoaded: false } }, onLoad() {this.loadData();this.hasLoaded = true; }, onShow() {if (!this.hasLoaded) this.loadData(); }
关键结论:当数据请求依赖URL参数或只需加载一次时,优先使用
onLoad
;需要响应页面可见性变化时使用onShow
。两者配合使用可兼顾初始化效率和实时性需求。