1

首先是一些上下文:

我正在构建一个基于 VueJS 的扫雷应用程序。我的网格是一个对象树:每个 Box 对象都有一个“邻居”属性,其中包含 Box 对象,这些对象是下一个框。

结构是圆形的,但很好。

现在的问题:

首先,我尝试在一个小网格(5x5)上运行良好,但是在尝试生成更大的网格(50x50)时,Vue 在设置观察者时产生了“超出最大调用堆栈大小”错误,这是日志 控制台中的调用堆栈错误

这棵树似乎太大了,vue 无法处理反应性。

冻结我的对象时已确认它工作得很好(没有调用堆栈错误):

data() {
    const game = new MinesWheeper(30, 30, 40)
    Object.freeze(game)
    return {
      game
    }
  }

但是由于冻结,反应性(显然)下降了。尽管如此,我需要反应来显示点击框。

现在这是我发现的问题/线索:

  • 您是否曾经遇到过 Vue 的调用堆栈问题,或者我错过了什么?

  • 有没有办法在具有这种对象结构的 VueJS 上进行反应性工作?(VueX 是解决方案的一部分吗?我真的不知道)

  • 还是我应该考虑使用 VueJS 以外的东西?(用香草做吗??)

提前谢谢,如果我的帖子很乱,对不起,这是我 5 年来的第一篇文章,我很紧张哈哈

编辑:这是一个游戏对象的样子:

game: { // MinesWheeper
  _grid: { // Grid
    "_bombsNumber": 40
    _boxes: [ // Array of Box
      {
        "_hasBomb": true
        "_index": 0
        "_isRevealed": false
        "_neighbors": [Box, Box, Box, Box]
        "hasBomb": true
        "index": 0
        "isRevealed": false
        "nearBombs": 1
      }
    ]
  }
}

此外,在点击一个盒子时,我需要: - 如果 Box.hasBomb 为真,则结束游戏 - 显示内容(如果里面没有炸弹) - 如果 Box.nearBombs 等于 0,则传播reveal()调用

我的 Box.reveal() 方法是递归的:

reveal() {
    if (this._isRevealed) return

    this._isRevealed = true

    if (this.hasBomb) {
      console.log('Game over')
    } else if (this.nearBombs === 0) {
      this._neighbors.forEach(neighbor => {
        neighbor.reveal()
      })
    }
  }

这就是为什么我认为我需要反应性来更新每个 Box.reveal 调用的视图

4

1 回答 1

1

因此,您有 Box 对象的一维数组,并且每个对象都包含neighbors数组,其中包含对其相邻 Boxes 的引用(对主数组项)。

您可以使用Object.defineProperty()创建neighbors属性,configurable: false而 Vue 将无法在其上设置响应性。但是其余的 Box 对象属性仍然是反应式的。

我自己设置了一个小演示。所有重要的都在components/HelloWorld.vue组件中。

示例很少令人费解,因为使用数组可以通过索引轻松引用“prev”和“next”元素,但我需要在对象之间引入循环引用。

在我的机器上,它会在数组中有 10000 个项目时引发错误。但是,如果您切换错误的this.setupRelatioships(boxes);呼叫this.setupRelatioshipsWithProperties(boxes);就会消失。

setupRelatioships(boxes) {
      for (let i = 0; i < boxes.length; i++) {
        boxes[i].prev = i > 0 ? boxes[i - 1] : null;
        boxes[i].next = i < boxes.length - 1 ? boxes[i + 1] : null;
      }
    },
    setupRelatioshipsWithProperties(boxes) {
      const opts = {
        configurable: false,
        enumerable: true,
        writable: true
      };

      for (let i = 0; i < boxes.length; i++) {
        Object.defineProperty(boxes[i], "prev", {
          ...opts,
          value: i > 0 ? boxes[i - 1] : null
        });
        Object.defineProperty(boxes[i], "next", {
          ...opts,
          value: i < boxes.length - 1 ? boxes[i + 1] : null
        });
      }
    },

先前引用的Demo(感谢Guillaume Chau

于 2019-12-28T10:19:27.407 回答