Uniapp 中 onShow 与 onLoad 的执行时机解析
Vue 中 onShow 与 onLoad 的执行时机解析
在 Vue.js（标准 Vue）和 Uniapp 框架 中，生命周期钩子的执行机制存在差异，特别是你提到的 onShow 和 onLoad：
一、标准 Vue.js（浏览器环境）
1. 生命周期钩子
标准 Vue 没有 onShow 和 onLoad 钩子，与之对应的是：
created：实例初始化后mounted：DOM 挂载完成后activated：组件被 keep-alive 缓存并激活时updated：数据更新导致 DOM 重新渲染后
2. 执行顺序
created -> mounted -> updated -> destroyed
二、Uniapp 框架（小程序环境）
1. 特有的生命周期钩子
Uniapp 为小程序环境扩展了原生生命周期钩子：
onLoad：页面加载时触发（初次创建）onShow：页面显示时触发（每次显示）onReady：页面初次渲染完成时触发onHide：页面隐藏时触发onUnload：页面卸载时触发
2. 执行顺序
-
首次进入页面：
onLoad -> onShow -> onReady -
从其他页面返回当前页面：
onShow -
页面隐藏（跳转到其他页面）：
onHide -
页面卸载（如使用
uni.navigateBack()）：onUnload
三、关键区别
| 钩子 | 标准 Vue.js | Uniapp（小程序） |
|---|---|---|
onLoad | 无 | 页面初次加载时触发 |
onShow | 无 | 页面每次显示时触发 |
mounted | DOM 挂载完成后触发 | 类似 onReady |
四、你的问题解答
1. onShow 可能在 onLoad 之后吗？
是的，每次页面加载时，onLoad 总是先于 onShow 执行：
export default {onLoad(options) {console.log('页面加载：onLoad'); // 先执行},onShow() {console.log('页面显示：onShow'); // 后执行}
}
2. 常见场景
- 首次进入页面：
onLoad→onShow - 切换 TabBar 页面：只触发
onShow（页面已缓存，不再触发onLoad） - 返回上一页：只触发
onShow（页面已缓存）
五、使用建议
1. 数据获取
- 只需要加载一次的数据：放在
onLoad中 - 每次显示都需要更新的数据：放在
onShow中
export default {onLoad() {// 初始化数据（只执行一次）this.fetchInitialData();},onShow() {// 刷新数据（每次页面显示时执行）this.refreshData();}
}
2. 性能优化
避免在 onShow 中执行大量计算或频繁请求数据，可结合 onLoad 和缓存机制：
export default {data() {return {loaded: false,data: null}},onLoad() {if (!this.loaded) {this.fetchData();this.loaded = true;}},onShow() {// 只在需要时刷新if (this.needRefresh) {this.refreshData();}}
}
六、验证方法
在页面中添加日志：
export default {onLoad(options) {console.log('onLoad 执行');},onShow() {console.log('onShow 执行');}
}
观察控制台输出，验证执行顺序：
-
首次进入页面：
onLoad 执行 onShow 执行 -
从其他页面返回：
onShow 执行
总结
在 Uniapp 中，onShow 总是在 onLoad 之后执行（首次加载时），但 onShow 会在每次页面显示时触发，而 onLoad 仅在页面初次创建时触发一次。理解这一点对处理页面数据和交互至关重要。