uni-app—— 「页面闪一下」这个bug，90%的前端都遇到过，但只有1%的人知道真正原因

张开发
• 2026/4/5 1:19:42 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

uni-app—— 「页面闪一下」这个bug，90%的前端都遇到过，但只有1%的人知道真正原因
用户反馈说页面“闪了一下”，测试说“没问题啊，数据不是正常显示了吗”，但我知道这背后藏着90%前端都踩过的坑一次让我印象深刻的bug修复事情是这样的。上个月产品经理找我，说用户反馈列表页面“会闪一下”。我打开页面，网速正常，数据正常，确实没看到闪烁。于是回复：“可能是网络波动，无法复现，暂时关闭。”一个月后，这个bug又被提上来了。这次产品经理录了屏：打开页面 → 出现“暂无数据”的空状态 → 0.5秒后 → 正常列表显示我沉默了。这不是网络慢的问题，是我的代码逻辑有问题。而且这个问题，整整被忽略了一个月。问题复现：3行代码引发的体验灾难当时我的代码长这样vuetemplate view !-- 没有数据就显示空状态 -- view v-if="list.length === 0" image / text暂无数据/text /view !-- 有数据显示列表 -- view v-else view v-for="item in list"{ { item.name }}/view /view /view /template script setup const list = ref([]) // 初始为空数组 onMounted(async () = { const res = await fetchData() // 假设需要2秒 list.value = res.data }) /script看起来没问题对吧？问题就出在这个初始值上。时间线图解text页面打开瞬间： list = [] → list.length === 0 → 显示空状态 ❌ 2秒后数据返回： list = [数据1, 数据2] → 显示列表 ✅ 这中间的2秒，用户看到的就是空状态根本原因：我只判断了“有没有数据”，没有判断“数据来了没有”。正确的解决方案核心改动：引入加载状态vuetemplate view !-- 1. 加载中 → 显示loading -- view v-if="isLoading" text加载中.../text /view !-- 2. 加载完成且无数据 → 显示空状态 -- view v-else-if="list.length === 0" image / text暂无数据/text button @click="handleAdd"添加一条/button /view !-- 3. 有数据 →

更多文章