Vue3中ref数组调用push方法时推送到所有子数组的问题

你对Array.fill()的运行机制存在核心误解：

• Array.fill([])填充的是同一个数组引用
  JavaScript里数组属于引用类型，fill([])只会在调用时创建一个空数组，然后把这个数组的内存地址复制到新数组的每一个位置。也就是说，modifiedSchedules.value里的所有子数组，本质上都是指向同一个内存空间的同一个数组。当你调用modifiedSchedules.value[index].push(myObject)时，其实是在修改那个唯一的数组，所以所有子数组看起来都被添加了元素。

• 正确的二维数组创建方式
  要生成包含多个独立空数组的二维数组，需要为每个索引位置单独创建新数组，比如用Array.from()或者map()：

  // 方式1：Array.from
  modifiedSchedules.value = Array.from({ length: selectedUserIDs.value.length }, () => []);
  
  // 方式2：map
  modifiedSchedules.value = Array(selectedUserIDs.value.length).map(() => []);
  

  这两种方式都会为每个索引执行一次() => []，生成全新的空数组，每个子数组都有独立的引用，此时修改指定索引的子数组就不会影响其他子数组了。

内容的提问来源于stack exchange，提问作者Cornel Verster