Question

我刚与 Vuejs 制作井字游戏，遇到了一个小问题。

在板上单击一个框时，将运行makeMove()函数，该函数将更新板数组，该数组分别在板上保留X和O的1和-1。

makeMove: function (r, c) {

    if (this.gameOn)
    {
        if (this.board[r][c] == 0) {
            this.board[r].splice(c, 1, this.turn)
            this.turn = this.turn == 1 ? -1 : 1
        }

        if (this.checkGameOver())
            alert ('Someone Won')
    }
    else
    {
        alert('Game is Over')
    }
},

但是在makeMove()函数中，进行移动后，我调用checkGameOver()来检查棋盘阵列并在游戏结束时显示警报。

  // Example for just the first row
  checkGameOver: function() {
    let sum = 0
    for (let i = 0; i < 3; i++)
    {
        for (let j = 0; j < 3; j++)
            sum += this.board[i][j]

        if (sum == 3 || sum == -3) {
            this.gameOn = false
            return true
        }
        sum = 0
    }
}

问题在于，在最后一招呈现在页面上之前会显示警报框。如何解决此问题？

Answer 1

Vue js是否仅在功能完成后才在网页上呈现数据？

是的。更改反应性数据将不会立即重新渲染依赖的组件。批处理渲染，直到下一个刻度线开始为止。

alert暂停执行代码，因此，正如您所说的，该函数无法完成。但是，页面更新是否比此更为细微。在Firefox中，在显示$nextTick时会触发所有异步回调（包括alert），因此您应该看到页面更新。在Chrome中，它会暂停所有内容，甚至重新绘制页面。这种行为将来很容易改变。

我强烈建议您不要使用alert。为了进行日志记录，请使用console.log，为获得用户反馈，请改用HTML / CSS解决方案。

仅仅让Vue更新DOM是不够的，因为在Chrome中，alert也将阻止浏览器重新绘制页面。

要让alert在Chrome中显示，我必须：

等待$nextTick以确保DOM已更新。
等待requestAnimationFrame，这一切都在重新绘制之前。
等待另一个requestAnimationFrame，这将在我们想要重绘之后。

我将其放在下面的演示中，但要清楚一点，这是胡说八道。正确的解决方案是远离alert。

new Vue({
  el: '#app',
  data: {
    state: true
  },
  methods: {
    onClick() {
      this.state = !this.state

      this.$nextTick(() => {
        requestAnimationFrame(() => {
          requestAnimationFrame(() => {
            alert('State is ' + this.state)
          })
        })
      })
    }
  }
})

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
  <button @click="onClick">
    State is {{ state }}
  </button>
</div>

Answer 2

即使使用nexttick来确保DOM已经更新，也不确定UI是否已呈现！

Vue js是否仅在功能完成后才在网页上呈现数据？

2 个答案: