Question

我编写了一个程序，该程序采用网格并使用递归回溯生成迷宫。问题是，我希望能够可视化正在发生的迷宫生成。现在，Vue等到生成完成以更新UI并显示最终结果。 Vue更新UI时是否可以更改？

Answer 1

使一种方法仅生成迷宫的一个部分，然后调用一个方法以生成setTimeout中的下一个部分。这样，Vue可以一次渲染一个部分，您可以控制在视觉上构建迷宫的速度。

Answer 2

是的，这是可以实现的，Vue提供了反应系统，即，当您更新数据模型的某些部分时，视图层（HTML元素）也将更新。假设您的迷宫的数据结构是一个对象数组，并且此数据的可视表示形式由带有v-for的模板组成。示例：

<template>
 <div v-for="(item, index) in getMazeData" :key="index">{{ item.name }}</div>
</template>

因此，为了显示数据生成的进度，您应该在整个数据的某些部分准备就绪时对数据数组进行突变。如果从一个空数组开始，则可以简单地向其中推送新元素，然后反应系统将更新DOM本身。示例：

<script>
export default {
  methods: {
    generateMaze() {
        // ... some data generation happens here and then add new element to data store
        this.maze.push({... some fresh data})
    }
  },
  computed: {
    getMazeData() {
     return this.mazeData
    }
  },
  mounted() {
    this.generateMaze()
  },
  data() {
    return {
      mazeData: []
    };
  },
};
</script>

如果愿意，还可以在将新元素推送到数组之前应用一些延迟。示例：


methods: {
    generateMaze() {
        // ... some data generation happens here and then add new element to data store
        setTimout(()=> {
            this.maze.push({... some fresh data})
        },100)
    }
  },

最后，这也可以通过Vuex存储来实现，当某些数据准备就绪时，您可以在其中进行更改。

您可以更慢地更改VueJS中的状态吗？

2 个答案: