在vue中,假如定义一个对象

var obj1 = {
	index:1,
	name:first
}

var x = obj1;

obj1.index = 2;

console.log(x.index)

这个得出的结果也是2,原因好像是vue将obj1的地址给了x,这样x实际是指向的obj1相当于指针。今天在实际应用中也发现一个更隐藏的bug。

load(){
	this.old = []
},
add(){
	this.news={
		index:'',
		name:'',
		val:''
	}
},
quit(){
	this.news = this,old;
},
save(){
	this.old = this.news;
}

这是一个表单提交,提交是在页面切换另一个div。定义了old数据,如果取消就返回原来的数据。但是在测试的时候出现了一个问题,就是第一次取消没有问题,第二次取消news里就有了值。这是不应该的,两次取消都应该返回最开始的值。
问题就出现在 this.news = this.old。这实际上是讲old和news进行了绑定,这样第一次取消的时候就进行了old和news的绑定。不知道是不是vue内部问题,然后第二次add() 时对news赋值实际上也是对old赋值,之后执行quit()时,this.news=this.old实际上是

this.news = {
		index:'',
		name:'',
		val:''
	}

在这之前old已经变成了

{
		index:'',
		name:'',
		val:''
}

这里的解决方式就是在赋值的时候转一下json格式,这样指的就不是地址了。

this.old = JSON.parse(JSON.stringify(this.news));

如有错误,欢迎指正

Logo

前往低代码交流专区

更多推荐