Uniapp 页面返回不刷新？两种方法防止 onShow 触发多次请求！

前言

🤟 找工作，来万码优才：👉 #小程序://万码优才/r6rqmzDaXpYkJZF

在 Uniapp 中，使用 onShow() 钩子来监听页面显示，从而在页面返回时刷新数据

例如：

onShow() {this.getLastSubmission(); // 重新请求数据
}

但这样会导致 初次进入页面 时 onShow() 也会执行一次 getLastSubmission()，而 onLoad() 也会调用它，导致 多次请求，带来性能问题和不必要的 API 调用

初次进入时 只调用一次 getLastSubmission()，返回页面时也只会调用 getLastSubmission() 以刷新数据
避免 onShow 和 onLoad 同时触发 getLastSubmission()

在 Uniapp 的页面生命周期中：

• onLoad() 仅在页面首次创建时调用一次。
• onShow() 每次页面 显示 时都会触发，包括：
  首次进入页面
  从其他页面返回

如果 onLoad() 和 onShow() 都调用 getLastSubmission()，那么：
初次进入：onLoad() 调用 getLastSubmission()，然后 onShow() 立即执行，导致 请求了两次
返回页面：onShow() 再次调用 getLastSubmission()，符合预期

需要解决 初次进入时调用两次的问题

1. 变量（不生效）

定义 firstLoad 变量，初次进入页面时设为 true。
onLoad() 执行 getLastSubmission()，但 onShow() 第一次不执行。
onShow() 仅在 firstLoad = false 后执行，避免初次进入时的重复调用

export default {data() {return {lastSubmission: null, firstLoad: true // 标记是否是第一次进入};},onLoad() {this.getLastSubmission(); // 初次加载时调用},onShow() {if (!this.firstLoad) {this.getLastSubmission(); // 仅在返回时调用} else {this.firstLoad = false; // 标记为已加载，后续 onShow 可执行}},methods: {async getLastSubmission() {try {const res = await getSelf();if (res?.data) {this.lastSubmission = res.data;} else {this.lastSubmission = null;}} catch (error) {this.lastSubmission = null;}}}
};

2. 延迟（生效）

核心思路：

在 onLoad() 先调用 getLastSubmission()，但不立即设置 loaded = true.通过 setTimeout() 稍微延迟 loaded，确保 onShow() 触发时不会误调用

export default {data() {return {lastSubmission: null, loaded: false // 标记是否已经加载过};},onLoad() {this.getLastSubmission().then(() => {setTimeout(() => {this.loaded = true; // 延迟标记 loaded，防止 onShow 立即执行}, 100); });},onShow() {if (this.loaded) {this.getLastSubmission(); }},methods: {async getLastSubmission() {try {const res = await getSelf();if (res?.data) {this.lastSubmission = res.data;} else {this.lastSubmission = null;}} catch (error) {this.lastSubmission = null;}}}
};

初次进入：
onLoad() 调用 getLastSubmission()，但 loaded 需要 100ms 才变 true。onShow() 立即触发，但 loaded = false，不会调用 getLastSubmission()

返回页面：
onShow() 触发 getLastSubmission()，刷新数据