javascript - 在循环完成之前，VueJS不会重新渲染

我有这段VueJS代码：

new Vue({
  el: '#app',
  data: {
    tiles: [
      { isActive: false },
      { isActive: false },
      { isActive: false },
      { isActive: false },
      { isActive: false }
    ]

  },
  methods: {
    startWithLoop: function() {
      console.log("startWithLoop");
      for(var i = 0; i < 10000; i++ ) { this.blink() };
    },
    startWithInterval: function() {
      console.log("startWithInteral");
      setInterval(this.blink);
    },
    blink: function(){
      console.log("blink");
      var index = Math.floor(Math.random() * this.tiles.length);
      this.tiles[index].isActive = !this.tiles[index].isActive;
    }
  }
})

如果我调用方法startWithInterval，则可以在视图中看到tiles始终如何改变状态。

如果我调用方法startWithLoop，则直到循环完成，视图中都看不到任何更改。

这是the JSFiddle

如何在循环的每个步骤中触发视图更改？

最佳答案

不，这是Javascript eventloop在浏览器中的工作方式（不仅如此）。

您可以想象Javascript只在“瞬间之间的间隔”中执行，因此您对浏览器中发生的情况的了解只是瞬间的快照。

关于javascript - 在循环完成之前，VueJS不会重新渲染，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55666485/