Vue创建二维数组

创建非响应式数组

使用Array.from

const state = Array.from({ length: HEIGHT }, () => new Array(WIDTH).fill(null));

使用嵌套方法

const state = [];
for (let y = 0; y < HEIGHT; y++) {
  const row = [];
  for (let x = 0; x < WIDTH; x++) {
    row.push(null);
  }
  state.push(row);
}

创建响应式数组

ref()

const state = ref(
  Array.from({ length: HEIGHT }, (_, y) => Array.from({ length: WIDTH }, (_, x): BlockState => ({
    x,
    y,
    adjacentMines: 0,
    revealed: false,
  }))),
)

reactive()

const state = reactive(
  Array.from({ length: HEIGHT }, (_, y) => Array.from({ length: WIDTH }, (_, x) => ({
    x,
    y,
    adjacentMines: 0,
    revealed: false,
  }))),
);

区别：

ref 和 reactive 是 Vue 3 中用于创建响应式数据的两个函数，它们之间有一些区别。

数据类型不同：ref 函数用于创建一个包装过的响应式引用，它返回一个包含 .value 属性的对象。而 reactive 函数用于创建一个响应式对象，它返回一个普通的 JavaScript 对象。
访问方式不同：使用 ref 创建的响应式引用需要通过 .value 属性来访问和修改其值。而使用 reactive 创建的响应式对象可以直接访问和修改其属性。
响应式深度不同：ref 创建的对象是浅响应式的，即对象内部的属性不会自动转换为响应式。而 reactive 创建的对象是深度响应式的，对象内部的属性也会被转换为响应式。
性能开销不同：由于 ref 创建的对象是浅响应式的，它在访问和修改属性时的性能开销较小。而 reactive 创建的对象是深度响应式的，它在访问和修改属性时需要进行递归的依赖追踪，可能会带来一些性能开销。

在实际使用中，通常使用 ref 来包装基本类型的数据，如数字、字符串等，以及需要在模板中进行双向绑定的数据。而对于复杂的对象或需要进行深度响应的数据，可以使用 reactive 来创建响应式对象。

需要根据具体的场景和需求选择合适的函数来创建响应式数据。

总结

使用 Array.from 方法创建的二维数组是非响应式的。这意味着当你修改数组中的数据时，页面不会自动更新。

在 Vue 中，只有通过 ref 或 reactive 函数创建的对象才会被视为响应式对象，其属性的变化会触发相关组件的更新。

在你提供的代码中，state 是一个通过 Array.from 方法创建的二维数组，其中的每个元素都是一个数组。这些数组元素是普通的 JavaScript 数组，不是响应式的。

如果你想要在修改数据时触发页面的更新，你可以使用 Vue 提供的响应式数据结构，如 ref 或 reactive。例如，你可以将 state 改为一个响应式对象，如下所示：

const state = reactive(
  Array.from({ length: HEIGHT }, () => new Array(WIDTH).fill(null))
);

这样，当你修改 state 中的数据时，相关的组件会自动更新以反映这些变化。

需要注意的是，为了使用 reactive 函数，你需要在 Vue 3 中使用 Composition API。确保你已经正确导入 reactive 函数，并在适当的地方使用它来创建响应式对象。