深入理解 uni-app 页面生命周期（一）：onLoad vs onShow

在 uni-app 中，页面的生命周期是通过一系列的生命周期钩子函数来管理的。本文将聚焦于 onLoad 和 onShow 两个重要的生命周期函数，深入探讨它们的触发时机和用途。

onLoad(options)

触发时机

onLoad 在页面初次加载时触发，仅会在页面初次加载时触发一次。

用途

通常用于获取页面加载时传递的参数 options。通过 options 对象，我们能够获取通过 URL 或者通过 uni.navigateTo、uni.redirectTo等方式传递的参数。

export default {
  onLoad(options) {
    console.log('onLoad', options);
    // 在这里可以处理传递过来的参数
  },
  // 其他生命周期函数和配置项
};

onShow()

触发时机

onShow 在页面显示时触发，不仅在页面初次加载时触发，每次页面从后台进入前台也会触发。

用途

通常用于监听页面的显示状态，可以在这里执行一些需要在页面显示时进行的操作。由于在页面切换、TabBar 切换时也会触发，适合用于监控页面显示状态。

export default {
  onShow() {
    console.log('onShow');
    // 在这里可以执行页面显示时需要的操作
  },
  // 其他生命周期函数和配置项
};

总结

通过对 onLoad 和 onShow 的对比，我们可以更好地理解它们各自的作用。onLoad 适用于在页面初次加载时获取参数，而 onShow 则更适用于监控页面的显示状态，并在页面每次显示时执行相应的操作。

在实际开发中，根据业务需求合理使用这两个生命周期函数，能够更有效地管理页面的生命周期。