vue解决修改集合数据会同时修改另集合数据问题

前言

在通过点击一个列表进行数据的删除的时候，会发现一个问题，就是删除一个集合的数据会同时删除另一个集合的数据，起初发现的时候，以为我逻辑写的有问题，然后没发现出问题。然后进行查找，发现

出现此问题的原因就是两个数组来源于同一个对象的指针引用，
所以在对其中一个数组进行操作的时候，才会影响到另一个同源的数组

同样，对于修改操作也进行一个记录

集合数据

<script>
	export default {
		name: "app",
		data() {
			return {
				listA: ["A数据","B数据","C数据"], // 集合A，原始数据
				listB: [], // 集合B，所有数据来源于集合A
				listC: [], // 集合C，所有数据来源于集合A
			}

		}
	}
</script>

问题分析

在对我的代码进行分析的时候，发现我进行点击单个v-for列表的数据从listA添加到listB的时候，在进行删除listB数据操作的时候并不会受到影响。

而通过全选把listA的数据赋值给listB，在删除listB的数据的时候会导致连同listA的数据一起删除。

通过查看代码发现，通过全选进行赋值的操作为:

<script>
	export default {
		name: "app",
		methods: {
			// 赋值list方法
			setListData() {
				this.listB = this.listA
			}
		}
	}
</script>

删除会同步删除另一个数据解决办法

个人使用的解决办法有两种

方法一

<script>
	export default {
		name: "app",
		methods: {
			// 赋值list方法
			setListData() {
				this.listB = [...this.listA]
			}
		}
	}
</script>

方法二

<script>
	export default {
		name: "app",
		methods: {
			// 赋值list方法
			setListData() {
				for (let i in this.listA) {
					this.listB.push(this.listA[i]);
				}
			}
		}
	}
</script>

修改会同步修改另一个数据解决办法

<script>
	export default {
		name: "app",
		methods: {
			// 赋值list方法
			setListData() {
				this.listB=this.listA;
				this.listC=json.parse(json.stringify(this.listA))
			}
		}
	}
</script>

结语

以上为本人解决修改一个集合数据会同时修改另一个集合数据问题的过程.

这篇好文章是转载于：学新通技术网