vue对象拷贝,解决由于引用赋值修改原对象的方式

 更新时间:2023年10月18日 09:58:41   作者: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];

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue点击在弹窗外部实现一键关闭的示例代码

    Vue点击在弹窗外部实现一键关闭的示例代码

    在Vue应用中,弹窗是一个常见的交互元素,有时我们可能希望用户点击弹窗外部时,弹窗能够自动关闭,本文主要介绍了Vue点击在弹窗外部实现一键关闭的示例代码,感兴趣的可以了解一下
    2024-06-06
  • vue中提示$index is not defined错误的解决方式

    vue中提示$index is not defined错误的解决方式

    这篇文章主要介绍了vue中提示$index is not defined错误的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • Vue3.0 axios跨域请求代理服务器配置方式

    Vue3.0 axios跨域请求代理服务器配置方式

    这篇文章主要介绍了Vue3.0 axios跨域请求代理服务器配置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue3中hooks的概述及用法小结

    vue3中hooks的概述及用法小结

    这篇文章是介绍一下vue3中的hooks以及它的用法,主要围绕两点来介绍,一个是hooks基本概念,另一个是vue3中hooks的使用方法,本文结合实例代码给大家讲解的非常详细,需要的朋友参考下吧
    2023-03-03
  • 浅析Vue中拆分视图层代码的5点建议

    浅析Vue中拆分视图层代码的5点建议

    这篇文章主要介绍了Vue中拆分视图层代码的5点建议,下面就如何进行脚本代码拆分提供一些思路,有一些可能是很基本的原则,为尽可能完整就放在一起,你并不需要从最开始就采纳所有的建议。需要的朋友可以参考下
    2019-08-08
  • 在Vue3中处理异步API调用并更新表单数据的方法示例

    在Vue3中处理异步API调用并更新表单数据的方法示例

    这篇文章主要介绍了如何在Vue3中处理异步API调用并更新表单数据(附Demo),文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-06-06
  • Vue3 (五)集成HTTP库axios详情

    Vue3 (五)集成HTTP库axios详情

    这篇文章主要讲解Vue3 集成HTTP库axios的相关内容,本文讲围绕如何利用Vue3 集成HTTP库axios的相关资料展开文章,需要的朋友可以参考一下,希望对你有所帮助
    2021-10-10
  • Vue3+Tsx给路由加切换动画时的踩坑及解决

    Vue3+Tsx给路由加切换动画时的踩坑及解决

    这篇文章主要介绍了Vue3+Tsx给路由加切换动画时的踩坑及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • Vue+Koa2 打包后进行线上部署的教程详解

    Vue+Koa2 打包后进行线上部署的教程详解

    这篇文章主要介绍了Vue+Koa2 打包后如何进行线上部署,给大家分享了一些问题及解决方法,需要的朋友可以参考下
    2019-07-07
  • Vue中如何对ElementUI的Dialog组件封装

    Vue中如何对ElementUI的Dialog组件封装

    这篇文章主要介绍了Vue中如何对ElementUI的Dialog组件封装问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03

最新评论