javascript - 视觉 : How to re-render view midway through event loop cycle?

Question

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

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

在我的实际应用中，我运行了一堆模拟。当用户点击“Simulate”时，我需要:将文本更改为“Simulating...”，运行模拟，然后将文本更改回“Simulate”。

我试过了 Vue.nextTick , vm.$forceUpdate , 和 setTimeout(fn, 0)，但似乎都不起作用。

HTML

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

JS

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);  
}

Answer 1

setTimeout 对我有用:https://codepen.io/anon/pen/VrZqRa?editors=1010

此外，永远不要像在 JavaScript 中那样使用大量 for 循环:它们会完全卡住您的事件循环(它需要同时处理 javascript 和用户交互)。