UI依赖异步数据导致的白屏

最近发现了一个奇怪的现象，代码如下：

created() {
  this.funcA()
  this.funcB()
}
methods: {
  async funcA() {
    awat xxxA();
  }
  async funcB() {
    awat xxxB();
  }
}

这个代码在PC上可以， 为什么在app上尤其是iOS上，会有白屏问题。

问题分析

**在 created() 中调用 async 方法，会导致 funcA() 和 funcB()并行执行且不阻塞生命周期。
在 PC 浏览器中，由于性能高、网络快、渲染宽容，可能“看起来正常”；
但在 iOS WebView（尤其是低版本或 WKWebView）中，生命周期推进更快或渲染更严格，导致：

• 数据还没加载完，模板已渲染 → 显示空白
• 或后续逻辑依赖未就绪的数据 → 出错

解决

** 在调用处也增加async-await

created() {
  this.loadData();
},
methods: {
  async loadData() {
    await this.funcA();
    await this.funcB(); 
  }
} 

平台差异的本质

1. PC Chrome

• 网络快
• V8 引擎优化好
• 渲染宽容（可能自动重绘）
  → 掩盖异步时序问题

2. iOS WKWebView

• 网络相对慢
• JavaScriptCore 严格
• 渲染 pipeline 更“确定性”
  → 暴露竞态条件

3. Android WebView

• 介于两者之间，但是新版 Chromium 内核趋近 PC 行为

PC 开发环境是“理想情况”（本地 server 快、浏览器宽容），掩盖了时序问题；
真机（尤其 iOS）暴露了代码的竞态缺陷。

结论：如果 UI 依赖异步数据，就必须显式等待 —— 无论平台