vue3数组引用传递的问题

//如下定义了一个ref类型的数组:
const selectedData = ref<number[]>([6, 7, 8, 9]);

const modifySelectedData = (data: Ref<number[]>) => {
  data.value.splice(1, 1);  // 修改了传入的 Ref 数组，删除一个元素
};

modifySelectedData(selectedData);

console.log(selectedData.value);  // 结果是 [6, 8, 9]

如何解决副作用

const modifySelectedData = (data: Ref<number[]>) => {
  const copiedData = [...data.value];  // 创建副本
  copiedData.splice(1, 1);  // 修改副本
  console.log(copiedData);  // 修改后的副本
};

const selectedData = ref<number[]>([6, 7, 8, 9]);

modifySelectedData(selectedData);

console.log(selectedData.value);  // 原始数据未被修改 [6, 7, 8, 9]
const modifySelectedData = (data: Ref<number[]>) => {
  const copiedData = [...data.value];  // 创建副本，可以通过传递副本来避免这种副作用
  copiedData.splice(1, 1);  // 修改副本
  console.log(copiedData);  // 修改后的副本
};

const selectedData = ref<number[]>([6, 7, 8, 9]);

modifySelectedData(selectedData);

console.log(selectedData.value);  // 原始数据未被修改 [6, 7, 8, 9]