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

Question

我有这段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，我可以在 View 中看到tiles如何一直改变状态。

如果我调用方法 startWithLoop，在循环完成之前我不会在 View 中看到任何变化。

这里是the JSFiddle

如何在循环的每个步骤中触发 View 变化？

Answer 1

不，这就是 Javascript 事件循环在浏览器中的工作方式(而且不仅仅是)。

您可以想象 Javascript 仅在“时刻之间的间隙”中执行，因此您对浏览器中发生的情况的了解只是该时刻的静态快照。