javascript - vue3中， 将A赋值给B，然后修改A, B也会跟着修改吗？

Question

const myOptionalList = ref([])

const currentOptional = reactive({
  red: [],
  blue: []
})

const handleChange = () => {
    myOptionalList.value = [currentOptional, ...myOptionalList.value]
    // myOptionalList.value = JSON.parse(JSON.stringify([currentOptional, ...myOptionalList.value]))
    currentOptional.red = []
    currentOptional.blue = []
}

在vue3中， 如果我按上面的写法，将currentOptional赋值到了myOptionalList中后， 清空currentOptional，发现myOptionalList也会被清空

我知道这是引用传递的问题，解决方法是进行深拷贝， 但是我有点疑惑，我记得vue2中好像不存在这种问题啊， 是我记错了吗

Answer 1

structuredClone

Answer 2

你拷贝的是数组，数组的引用并没有解除。需要单独解构currentOptional中的每一个值是数组的属性。