Vue中循环执行时DOM不更新，如何显示加载状态？

这个问题我之前在项目里踩过坑！本质是JavaScript单线程特性和Vue异步DOM更新机制共同导致的——你的同步大循环会直接霸占浏览器的事件线程，让Vue的DOM更新任务根本没机会在循环期间执行，直到循环结束后才会被批量处理，所以加载div自然显示不出来。

核心原因拆解 #

JavaScript是单线程的，浏览器的UI渲染和JS代码执行共用同一个事件循环：

• 当你在run()里设置this.loading = true后，Vue并不会立刻更新DOM，而是把这个更新任务加入异步队列
• 紧接着的超大同步循环会完全阻塞线程，直到循环结束，浏览器才会去处理队列里的DOM更新任务
• 此时this.loading已经被设置回false，两次更新被合并，DOM根本不会显示加载状态

可行解决方案 #

方案1：用setTimeout把循环放到下一个事件循环

把耗时循环逻辑放到setTimeout里，让当前线程先处理完Vue的DOM更新，再执行循环：

runWithAsync() {
  this.loading = true;
  // 用setTimeout把循环推到下一个事件循环，给浏览器留足渲染时间
  setTimeout(() => {
    for (let i = 0; i < 1000000000; i++) {}
    this.loading = false;
  }, 0);
}

方案2：用requestAnimationFrame（更适配UI场景）

如果你的操作和UI渲染关联度高，requestAnimationFrame会更合适，它会在浏览器下一次重绘前执行循环逻辑：

runWithRAF() {
  this.loading = true;
  requestAnimationFrame(() => {
    for (let i = 0; i < 1000000000; i++) {}
    this.loading = false;
  });
}

方案3：拆分大循环为小批量（避免页面卡顿）

如果循环规模实在太大，一次性执行还是会让页面卡死，建议把循环拆分成多个小批次，每次执行一部分后就让出线程，让浏览器处理UI：

async runInBatches() {
  this.loading = true;
  const total = 1000000000;
  const batchSize = 10000000; // 每次处理1000万次
  let processed = 0;

  while (processed < total) {
    // 处理当前批次
    for (let i = 0; i < batchSize && processed < total; i++) {
      processed++;
    }
    // 让出线程，等待浏览器完成UI渲染
    await new Promise(resolve => setTimeout(resolve, 0));
  }

  this.loading = false;
}

内容的提问来源于stack exchange，提问作者Sinan Yaman