Vue：如何在事件循环周期中途重新渲染视图？答案

【问题标题】：Vue: How to re-render view midway through event loop cycle?Vue：如何在事件循环周期中途重新渲染视图？
【发布时间】：2018-04-09 00:22:59
【问题描述】：

https://codepen.io/anon/pen/mqbaXE?editors=1010

我希望value 在您单击按钮后立即显示为“B”，然后在一个巨大的循环结束后显示为“C”。我怎样才能做到这一点？目前它从不显示为“B”。

在我的实际应用程序中，我正在运行一堆模拟。当用户单击“模拟”时，我需要：将文本更改为“模拟...”，运行模拟，然后将文本改回为“模拟”。

我尝试过Vue.nextTick、vm.$forceUpdate 和setTimeout(fn, 0)，但似乎都没有用。

HTML

<div id="example">
  <p>Value: {{ message }}</p>
  <button v-on:click="change()">Change</button>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'A'
  },
  methods: {
    change: change
  }
})

function change () {
  vm.message = 'B';

  setTimeout(function () {
    for (var i = 0; i < 2000000000; i++) {}
    vm.message = 'C';
  }, 0);  
}

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

setTimeout 为我工作：https://codepen.io/anon/pen/VrZqRa?editors=1010

另外，永远不要在 JavaScript 中做像这样的大型 for 循环：它们会完全冻结你的事件循环（它需要同时处理 javascript 和用户交互）。

【讨论】：

抱歉没有更清楚。我的问题是如何处理您确实有巨大循环的情况。在我的特定应用程序中，我正在运行一堆模拟。当用户单击“模拟”时，我想 1) 提供正在模拟的反馈，2) 运行模拟，3) 显示模拟结果。
只有在 setTimeout 调用返回后才能更新 DOM，所以在一个 setTimeout 中修改 vm.message 并在另一个中进行模拟。更好的是，使用web worker 运行您的模拟，这样您的 UI 将保持响应。
两个setTimeouts 对我不起作用：codepen.io/anon/pen/zPOewG?editors=1010。至于网络工作者，如果它有效，我会接受它。我现在正在尝试使用 Web Worker 重现该场景。但这确实有点矫枉过正。
Web Workers 确实解决了这个问题！ plnkr.co/edit/l93HpDsIEgaA6EjyMorN?p=preview 不过，我将把这个问题保持开放，因为我想看看是否有更简单的解决方案。
如果我将第二个 setTimeout 延迟几毫秒，它会起作用。