uniapp生命周期函数onLoad和onShow有何区别？何时分别使用？

Question

在UniApp开发中，`onLoad`和`onShow`都是页面生命周期函数，但它们的触发时机和使用场景有所不同。`onLoad`仅在页面加载时触发一次，适合用于初始化数据，如获取页面参数、加载必要数据等。而`onShow`每次页面显示时都会触发，即使从后台切换回前台也会调用，适用于需要在页面每次展示时刷新或更新内容的场景，比如重新获取用户状态或更新实时数据。 常见问题：为什么我在`onLoad`中获取的数据，在切到其他页面再返回时会丢失？这是因为`onLoad`只在页面初次加载时执行，若需在页面重新显示时更新数据，应将相关逻辑放到`onShow`中。理解两者的区别并合理使用，可有效提升应用性能与用户体验。

Answer 1

1. 基础概念：UniApp页面生命周期函数

在UniApp开发中，页面生命周期函数是开发者用来控制页面状态和行为的重要工具。其中，onLoad 和 onShow 是两个常见的生命周期函数。

• onLoad: 仅在页面加载时触发一次，适合用于初始化数据，例如获取页面参数或加载必要数据。
• onShow: 每次页面显示时都会触发，即使从后台切换回前台也会调用，适用于需要在页面每次展示时刷新或更新内容的场景。

以下是它们的基本区别：

生命周期函数	触发时机	适用场景
onLoad	页面初次加载时	初始化数据、获取页面参数
onShow	每次页面显示时（包括从后台切换回前台）	刷新或更新实时数据

2. 常见问题分析：为什么数据会丢失？

许多开发者在实际开发中遇到一个问题：在onLoad中获取的数据，在切到其他页面再返回时会丢失。这是因为onLoad只在页面初次加载时执行，而当页面被隐藏后再重新显示时，onLoad不会再次触发。

具体流程如下：

// 页面A
export default {
    onLoad(options) {
        console.log('页面加载时触发');
        this.data = options.id; // 初始化数据
    },
    onShow() {
        console.log('页面显示时触发');
        this.refreshData(); // 刷新数据
    }
}
    

如果需要在页面重新显示时更新数据，应该将相关逻辑放到onShow中。

3. 解决方案：合理使用生命周期函数

为了解决上述问题，我们需要明确两者的职责范围，并根据实际需求选择合适的生命周期函数。

1. 对于只需要在页面加载时执行一次的逻辑，例如获取页面参数或初始化配置，应放在onLoad中。
2. 对于需要在页面每次显示时执行的逻辑，例如刷新用户状态或更新实时数据，应放在onShow中。

以下是一个示例代码，展示了如何结合使用onLoad和onShow：

export default {
    data() {
        return {
            userId: null,
            userData: {}
        };
    },
    onLoad(options) {
        this.userId = options.id; // 获取页面参数
    },
    onShow() {
        this.getUserData(); // 每次显示时刷新用户数据
    },
    methods: {
        getUserData() {
            uni.request({
                url: `https://api.example.com/user/${this.userId}`,
                success: (res) => {
                    this.userData = res.data;
                }
            });
        }
    }
}
    

4. 性能与用户体验优化

合理使用onLoad和onShow不仅可以解决数据丢失的问题，还能有效提升应用性能与用户体验。例如：

• 通过onLoad减少不必要的重复请求。
• 通过onShow确保页面每次显示时数据是最新的。

以下是生命周期函数的调用顺序图：

sequenceDiagram
        participant App as 应用
        participant Page as 页面
        App->>Page: 页面加载触发 onLoad
        Note right of Page: 初始化数据
        App->>Page: 页面显示触发 onShow
        Note right of Page: 刷新或更新数据