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. 执行顺序

1. 首次进入页面：

   onLoad -> onShow -> onReady

2. 从其他页面返回当前页面：

   onShow

3. 页面隐藏（跳转到其他页面）：

   onHide

4. 页面卸载（如使用 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 执行');
  }
}

观察控制台输出，验证执行顺序：

1. 首次进入页面：

   onLoad 执行
   onShow 执行

2. 从其他页面返回：

   onShow 执行

总结

在 Uniapp 中，onShow 总是在 onLoad 之后执行（首次加载时），但 onShow 会在每次页面显示时触发，而 onLoad 仅在页面初次创建时触发一次。理解这一点对处理页面数据和交互至关重要。