使用深拷贝解决表单回显上一次数据问题

在使用表单数据填写时，有时填写了一下数据再打开该表单时，任然回显上一次的数据

目前需求是打开页面售卖站city默认为 北京，其他默认为空

下列为初始值

var obj={
    list:[],
    adress:"",
    city:"北京"
}

如果用了v-mode不需要点击提交，填完表单后该obj对象内存其实就为下列内容，

当我们下一次进入该页面时，就会任然显示刚才的obj内容。达不到我们的需求

var obj={
    list:[1,3],
    adress:"腾格里沙漠",
    city:"上海"
}

解决方法一

常用的方法是将该内容提交完之后，或返回后，重新赋值为空

var obj={
    list:[],
    adress:"",
    city:"北京"
}

深拷贝：创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”，新对象跟原对象不共享内存，修改新对象不会改到原对象

解决方法二

方法一有个问题就是，如果你的数据非常复杂，一个对象有几十个上百个属性，几十个默认值

我们不可能这样去一个一个重新赋值

此时我们就需要用到深拷贝，改方法就是将对象转字符串，然后又将字符串在转json。

在打开页面时调用该方法，重新赋值就OK了

function cloneJSON(source) {
    return JSON.parse(JSON.stringify(source));
}

解决方法三

方法二还有个缺点，就是在转json和字符串的过程中，可能有转化问题。比如本人就遇到过后端返回了时间格式，然后调用了cloneJSON方法后，时间格式出现了问题

该方法可以判断将非常复杂的数组或对象进行复制，使用方法也是一样，在页面中重新将函数返回值赋值给data。推荐使用该方法

//写函数
function copyObj(obj){

	var newObj=Array.isArray(obj) ? [] : {};
    
	for(let key in obj){
		if(typeof obj[key] =='object'){//如果key任然是对象,之类的引用类型,那就递归
			newObj[key] = copyObj(obj[key])
		}else{//基本类型,直接赋值
			newObj[key] = obj[key];
		}
	}
	return newObj;
}

在使用过程中有不理解的，欢迎打扰学习