vue3中父页面对两个子组件传同一个参数后，其中一个子组件数据变化，对应兄弟组件数据也会变化之问题解决（深拷贝创建独立的数据副本）

1.问题引发详细内容

我们先来看问题案例：
我们在父页面中data.vue中引入Table.vue和Bar.vue两个子组件，并传入同一个参数dataList。当在Bar.vue组件组件中对dataList重新赋值到新的变量dataListBar后对变量dataListBar进行排序修改操作，引发兄弟组件Table中的变量dataList也是修改后的数据，（案例来说已经赋值到新的变量了，只是对新的变量进行排序修改操作，不应该引发兄弟组件的数据的变化；发生原因还需深就）我们看问题源码和解决方案，先解决问题：

（1）父组件：data.vue

<template>
	<Table :tableData="dataList"></Table>
	<Bar :tableData="dataList" ></Bar>
</template>
<script setup>
import { ref, reactive, toRefs } from 'vue';
import Table  from './Table.vue';
import Table  from './Bar.vue';
 
 const dataList = ref([1,28,10,10,21,13])

</script>

（2）子组件1：Table.vue

<template>
	{{dataListTable}}
</template>
<script setup>
import { ref, reactive, toRefs } from 'vue';
const props = defineProps({
        dataList: Array, // 数据
    })
 
 const dataListTable = props.dataList

</script>

（3）子组件2：Bar.vue，在这个组件中进行了数据的修改

<template>
	//排序前
	{{dataListBar}}
	// 排序后
	{{dataListBarSort}}
</template>
<script setup>
import { ref, reactive, toRefs } from 'vue';
const props = defineProps({
        dataList: Array, // 数据
    })
 
const dataListBar = props.dataList
// 对dataListBar进行排序操作 
const dataListBarSort = dataListBar.sort((a,b)=>b-a)
</script>

2.问题解决办法

需要在子组件中操作时进行深拷贝创建独立的数据副本
Bar.vue组件中中修改的源码：

<template>
	//排序前
	{{dataListBar}}
	// 排序后
	{{dataListBarSort}}
</template>
<script setup>
import { ref, reactive, toRefs } from 'vue';
const props = defineProps({
        dataList: Array, // 数据
    })
 
// 对props.dataList数据进行深拷贝创建数据副本
const dataListBar = JSON.parse(JSON.stringify(props.dataList));
// 对dataListBar进行排序操作 
const dataListBarSort = dataListBar.sort((a,b)=>b-a)
</script>

3.总结问题引发的原理

在这个例子中，dataListBar 和dataListTable 都是props.dataList（既父组件中dataList ）的引用，它们都是同一个响应式dataList事务引用，因此任一组件的变化都会影响另一个。不管变量是否变化、赋值，但响应式引用始终是同一个，进而引发了上述例子中的问题！