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是一个单页面的应用,这导致一些爬虫和百度无法搜索到,如果你想针对你应用的其中某些页面进行SEO优化,让他们可以被爬虫和百度搜索到,你可以进行预渲染操作,下面这篇文章主要给大家介绍了关于Vue单页面应用做预渲染的相关资料,需要的朋友可以参考下
    2021-10-10
  • 深入理解vue-loader如何使用

    深入理解vue-loader如何使用

    本篇文章主要介绍了vue-loader,vue-loader是webpack下loader插件 可以把.vue文件输出成组件,有兴趣的可以了解一下
    2017-06-06
  • vue将文件/图片批量打包下载zip的教程

    vue将文件/图片批量打包下载zip的教程

    这篇文章主要介绍了vue将文件/图片批量打包下载zip的教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • websocket在vue2中的封装使用方式

    websocket在vue2中的封装使用方式

    这篇文章主要介绍了websocket在vue2中的封装使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vuex中的state属性解析

    vuex中的state属性解析

    这篇文章主要介绍了vuex中的state属性,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue中使用matomo进行访问流量统计的实现

    Vue中使用matomo进行访问流量统计的实现

    这篇文章主要介绍了Vue中使用matomo进行访问流量统计的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • 使用vue v-for循环图片路径方式

    使用vue v-for循环图片路径方式

    这篇文章主要介绍了使用vue v-for循环图片路径方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 详解vuex commit保存数据技巧

    详解vuex commit保存数据技巧

    这篇文章主要介绍了详解vuex commit保存数据技巧,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 浅谈Vue服务端渲染框架Nuxt的那些事

    浅谈Vue服务端渲染框架Nuxt的那些事

    这篇文章主要介绍了浅谈Vue服务端渲染框架Nuxt的那些事,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • Vue配置环境变量的正确打开方式

    Vue配置环境变量的正确打开方式

    这篇文章主要为大家介绍了Vue配置环境变量,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01

最新评论