Question

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

我希望value显示为＆＃34; B＆＃34;单击按钮后立即，然后显示为＆＃34; C＆＃34;在一个巨大的循环结束后。我怎么能做到这一点？目前它从未显示为＆＃34; B＆＃34;。

在我的实际应用中，我正在运行一系列模拟。当用户点击＆＃34;模拟＆＃34;时，我需要：更改文本以说'＆＃34;模拟...＆＃34;，运行模拟，然后将文本更改为说＆＃34 ;模拟＆＃34;

我已尝试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那样做大循环：它们会完全冻结你的事件循环（需要处理javascript和用户交互）。

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

1 个答案: