vue3 数组间取消强关联的几种实现方法

const originalArray = [1, 2, 3];
const newArray = [...originalArray]; // 创建一个 originalArray 的浅拷贝
 
// 修改 newArray
newArray[0] = 10;
 
// originalArray 不受影响
console.log(originalArray); // 输出: [1, 2, 3]
console.log(newArray);      // 输出: [10, 2, 3]

const originalArray = [1, 2, 3];
const newArray = originalArray.slice(); // 创建一个 originalArray 的浅拷贝
 
// 修改 newArray
newArray[0] = 10;
 
// originalArray 不受影响
console.log(originalArray); // 输出: [1, 2, 3]
console.log(newArray);      // 输出: [10, 2, 3]

const originalArray = [{ id: 1, value: 'a' }, { id: 2, value: 'b' }];
const newArray = originalArray.map(item => ({ ...item })); // 深拷贝每个对象
 
// 修改 newArray 中的对象
newArray[0].value = 'z';
 
// originalArray 不受影响
console.log(originalArray[0].value); // 输出: 'a'
console.log(newArray[0].value);      // 输出: 'z'

<template>
  <div>
    <p>Original Array: {{ originalArray }}</p>
    <p>New Array: {{ newArray }}</p>
  </div>
</template>
 
<script>
import { ref, computed } from 'vue';
 
export default {
  setup() {
    const originalArray = ref([{ id: 1, value: 'a' }, { id: 2, value: 'b' }]);
    const newArray = computed(() => originalArray.value.map(item => ({ ...item })));
 
    // 修改 newArray 的值（例如，改变第一个元素的 value）
    newArray.value[0].value = 'z';
 
    return { originalArray, newArray };
  }
}
</script>