Vue.js中类似网格的游戏地图的更有效数据

Question

我正在研究用Vue.js编写的类流氓游戏。

我首先创建了一个随机生成的类似网格的地图（递归拆分的二叉树），所以我的地图数据模型只是一个二维对象数组。

然后视图仅包含具有数据属性（data-occupied-by =“ empty”）的嵌套div以及基于该样式的相关CSS。

<div class="row" v-for="row in map">
    <div class="cell" v-for="cell in row">
       <div class="cell-contents" :data-occupied="cell.occupied"></div>
    </div>
</div>

对于地图来说效果很好，但是现在我要向空间添加其他对象。

问题在于：

this.map[ x ][ y ] = { occupant: "monster" };   //for simplicity's sake

不会触发任何重绘，并且手动触发整个地图中的一个很慢，这使我觉得我在存储游戏数据的方式上树错了方向。

这个模型有意义吗，还是我应该重新考虑一下？

Answer 1

经过更多研究，我发现使用内置数组（“ push”构建2d数组的每一行，并使用“ splice”删除/添加单元格（即替换它）允许Vue跟踪它而无需必须重新绘制整个2d地图。