vue对象拷贝,解决由于引用赋值修改原对象的方式
作者：qq_41831968
这篇文章主要介绍了vue对象拷贝,解决由于引用赋值修改原对象的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue对象拷贝,解决由于引用赋值修改原对象
在vue项目中，遇到了一个问题，前端需要将后台返回的数据展示在界面上，但是由于多了一个修改功能，点击修改按钮会弹出一个弹框，弹框所有要修改的内容和之前展示的一样，在弹框里修改原来界面的值也会一起变化，这显然不太合适（问题不好描述，直接上代码吧）
<!-- 展示的界面--> <el-form-item label="手机号"> <el-input v-model="form.account"></el-input> </el-form-item> <!-- 修改的弹框--> <el-dialog> <el-form-item label="手机号"> <el-input v-model="form.account"></el-input> <el-input v-model="newForm.account"></el-input> </el-form-item> </el-dialog>
export default {
data() {
return {
form: {},
newForm:{}
}
},
methods: {
request() {
//这里是请求的方法，懒得写了，因为返回的数据才是要处理的重点
this.$post('xxx/xxxx',params)
.then(res=>{
//将返回的数据直接赋值给form，然后直接在界面上展示
this.form = res;
//这时候问题就来了，因为弹框要修改的内容也是同样的数据，如果使用同一个对象this.form，
//那么在弹框里修改的是同一个对象
//即使新建一个对象再用返回的数据给它赋值，结果也是相同的，因为对象的赋值是引用赋值
//this.newForm = res;
//解决方法其实挺简单，Object.assign解决，
this.newForm = Object.assign({}, res)
//使用上面这个方法是完全复制了一个新的对象，即使修改这个newForm也不会影响form
})
}
}
}
vue踩坑--赋值后原对象的值改变
//vue定义变量data() {
return { //初始表格数组对象
tableData:[], //被赋值对象
newlData:[] //被赋值对象
}
}问题原因
简单的赋值没有创建一个新的对象内存地址，只是把newlData的内存地址指向了tableData的内存地址，一旦tableData的内存地址值发生改变，newlData的数据也会对应改变。
解决办法
方法1、创建一个新的对象，指向新的内存地址，通过JSON解析
let datas = JSON.parse(JSON.stringify(this.tableData));
方法2、es6之展开Object.assign（拷贝obj的内容到一个新的堆内存，copyObj存储新内存的引用）
let datas = Object.assign({},this.tableData);方法3、es6之展开运算符（仅用于数组）
let copyArr = [...this.tableData];
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。