嘿，编程的小伙伴们，你们在开发uni-app的时候，有没有遇到过页面间通信和数据刷新的难题？别急，今天就来跟你们聊聊这个话题，让你轻松解决uni-app页面通信与刷新的烦恼。
1. 理解uni-app页面生命周期
uni-app的页面生命周期和Vue组件的生命周期很像，但是uni-app针对移动端页面导航做了一些特别的优化。搞清楚这些生命周期钩子函数，是管理页面状态的关键。
- onLoad：页面初次加载时触发，适合做一次性初始化操作。
- onShow：页面显示时触发，包括初次显示和从其他页面返回时。
- onReady：页面初次渲染完成时触发。
- onHide：页面隐藏时触发（跳转到其他页面或进入后台）。
- onUnload：页面卸载时触发。
export default {
onLoad(options) {
console.log('页面加载，参数：', options)
this.loadInitialData()
},
onShow() {
console.log('页面显示')
this.refreshData()
},
onHide() {
console.log('页面隐藏')
},
methods: {
loadInitialData() {
// 初始化数据加载
},
refreshData() {
// 刷新数据
}
}
}1.2 onShow的适用场景与局限
onShow是最常用的页面刷新触发点，但它有几个明显的局限：
- 性能问题：每次页面显示都会触发，可能导致不必要的重复请求。
- 上下文缺失：无法区分是初次显示还是从特定页面返回。
- 数据一致性：无法感知其他页面的数据变更。
提示：对于简单的数据刷新需求，onShow确实是最直接的解决方案，但在复杂场景下需要考虑更精细的控制。
2. 全局事件总线(EventBus)实现松耦合通信
当应用涉及多个页面间复杂交互时，全局事件总线提供了一种更灵活的通信方式。
2.1 实现基础EventBus
// utils/eventBus.js
class EventBus {
constructor() {
this.events = {}
}
on(event, callback) {
if (!this.events[event]) {
this.events[event] = []
}
}
更多精彩内容，尽在「思享编程网」（www.sxgpb.com），我是陆砚码，我们下期再见！