vue数组或对象直接赋值问题

最新推荐文章于 2024-07-07 15:16:03 发布

原创最新推荐文章于 2024-07-07 15:16:03 发布 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #json

前端同时被 2 个专栏收录

50 篇文章

订阅专栏

代码知识

18 篇文章

订阅专栏

本文介绍在Vue.js中如何正确地使用深拷贝来避免数据引用问题，特别是当需要更新复杂对象时。文中详细解释了不同深拷贝方法如JSON.parse(JSON.stringify())、Object.assign()以及扩展运算符...的使用场景，并对比了它们之间的差异。

data:{
	index:0,
	list: [
        {
          title:'名字1',
        },
        {
          title:'名字2',
        }
    ],
    froms:{
		title:''
	}
},
methods:{
	change(){
		this.list[index] = this.froms;  //这会导致改变froms的数据的时候，list[0]也会改变;
		
		//可使用JSON.parse(JSON.stringify(this.form))这种方式进行深拷贝赋值
		this.$set(this.list,index,JSON.parse(JSON.stringify(this.form)))
		
		//Object.assign(this.form)是浅拷贝，但是Object.assign({},this.form)是深拷贝
		//注：当对象中只有一级属性，没有二级属性的时候，此方法为深拷贝。
			//但是对象中有对象的时候，此方法，在二级属性以后就是浅拷贝
		this.$set(this.list,this.dialogIndex,Object.assign({},this.form))	
		//Object.assign(this.form,this.list[index]) 也可直接使用此方法赋值
		
		//使用...扩展运算符也可以实现深拷贝
		this.$set(this.list,this.dialogIndex, {...this.form})
	}
}