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技术分享之你可能不知道的7个秘密

    vue技术分享之你可能不知道的7个秘密

    这篇文章主要介绍了vue技术分享-你可能不知道的7个秘密,需要的朋友可以参考下
    2018-04-04
  • vue3 setup语法糖下的定时器的使用与销毁

    vue3 setup语法糖下的定时器的使用与销毁

    如果在组件中需要使用定时器,注意在销毁组件的时候,要对定时器进行销毁,否则时间长了会导致页面卡顿,这篇文章给大家介绍vue3 setup语法糖下的定时器的使用与销毁的知识,感兴趣的朋友一起看看吧
    2024-02-02
  • Vue项目发布后浏览器缓存问题解决方案

    Vue项目发布后浏览器缓存问题解决方案

    在vue项目开发中一直有一个令人都疼的问题,就是缓存问题,这篇文章主要给大家介绍了关于Vue项目发布后浏览器缓存问题的解决方案,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • Vue-Access-Control 前端用户权限控制解决方案

    Vue-Access-Control 前端用户权限控制解决方案

    Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案。这篇文章主要介绍了Vue-Access-Control:前端用户权限控制解决方案,需要的朋友可以参考下
    2017-12-12
  • vue双向绑定数据限制长度的方法

    vue双向绑定数据限制长度的方法

    这篇文章主要为大家详细介绍了vue双向绑定数据限制长度的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • vue backtop组件的实现完整代码

    vue backtop组件的实现完整代码

    这篇文章主要介绍了vue backtop组件的实现完整代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04
  • vue 引用自定义ttf、otf、在线字体的方法

    vue 引用自定义ttf、otf、在线字体的方法

    这篇文章主要介绍了vue 引用自定义ttf、otf、在线字体的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • 简单的Vue SSR的示例代码

    简单的Vue SSR的示例代码

    本篇文章主要介绍了简单的 Vue SSR的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • 在IDEA中Debug调试VUE项目的详细步骤

    在IDEA中Debug调试VUE项目的详细步骤

    idea竟然有一个神功能很多朋友都不是特别清楚,下面小编给大家带来了在IDEA中Debug调试VUE项目的详细步骤,感兴趣的朋友一起看看吧
    2021-10-10
  • Vite的createServer启动源码解析

    Vite的createServer启动源码解析

    这篇文章主要为大家介绍了Vite的createServer启动源码解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09

最新评论