uni-app 中 onLoad 和 onShow 的区别是什么？

推荐答案

在 uni-app 中，onLoad 和 onShow 是两个常用的生命周期函数，它们的主要区别在于触发的时机和作用：

• onLoad：页面加载时触发，通常用于页面初始化操作，如获取页面参数、初始化数据等。onLoad 只在页面第一次加载时执行一次。

• onShow：页面显示时触发，每次页面从后台切换到前台时都会触发。适用于需要在页面每次显示时执行的操作，如刷新数据、更新状态等。

本题详细解读

onLoad

• 触发时机：页面加载时触发，且只在页面第一次加载时执行一次。
• 适用场景：适合用于页面初始化操作，如获取页面参数、初始化数据、请求网络数据等。
• 示例代码：

  // www.javascriptcn.com code example
  export default {
    onLoad(options) {
      // options 为页面传递的参数
      console.log('页面加载，参数为:', options);
      this.initData();
    },
    methods: {
      initData() {
        // 初始化数据
      }
    }
  }

onShow

• 触发时机：页面显示时触发，每次页面从后台切换到前台时都会触发。
• 适用场景：适合用于页面每次显示时需要执行的操作，如刷新数据、更新状态、检查用户登录状态等。
• 示例代码：

  // www.javascriptcn.com code example
  export default {
    onShow() {
      console.log('页面显示');
      this.refreshData();
    },
    methods: {
      refreshData() {
        // 刷新数据
      }
    }
  }

总结对比

注意事项

• onLoad 和 onShow 都是页面级别的生命周期函数，只能在页面组件中使用。
• 如果需要监听页面隐藏，可以使用 onHide 生命周期函数。
• 在 onLoad 中获取的页面参数可以通过 options 参数传递，而在 onShow 中无法直接获取页面参数。