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];

总结

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

相关文章

  • Vue3.0监听器watch与watchEffect详解

    Vue3.0监听器watch与watchEffect详解

    在 Vue 3 中,watch 仍然是一种用于监听数据变化并执行相应操作的方式,不过在组合式 API 中,watch 的使用方式与选项式 API 略有不同,这篇文章主要介绍了Vue3.0监听器watch与watchEffect,需要的朋友可以参考下
    2023-12-12
  • 解析vue.js中常用v-指令

    解析vue.js中常用v-指令

    本文以click为例给大家介绍vue.js中常用v-指令,可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript代码,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2021-10-10
  • vue-cli3 热更新配置操作

    vue-cli3 热更新配置操作

    这篇文章主要介绍了vue-cli3 热更新配置操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • Vue上传组件vue Simple Uploader的用法示例

    Vue上传组件vue Simple Uploader的用法示例

    本篇文章主要介绍了Vue上传组件vue Simple Uploader的用法示例,非常具有实用价值,需要的朋友可以参考下
    2017-08-08
  • 图文详解如何在vue3+vite项目中使用svg

    图文详解如何在vue3+vite项目中使用svg

    SVG指可伸缩矢量图形,用来定义用于网络的基于矢量的图形,下面这篇文章主要给大家介绍了关于如何在vue3+vite项目中使用svg的相关资料,需要的朋友可以参考下
    2021-11-11
  • vue2中插槽(slot)的基本使用规范

    vue2中插槽(slot)的基本使用规范

    插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性,下面这篇文章主要给大家介绍了关于vue2中插槽(slot)的基本使用规范的相关资料,需要的朋友可以参考下
    2022-03-03
  • vue开发公共组件之返回顶部

    vue开发公共组件之返回顶部

    这篇文章主要为大家详细介绍了vue开发公共组件之返回顶部,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • Vue中textarea自适应高度方案的实现

    Vue中textarea自适应高度方案的实现

    本文主要介绍了Vue中textarea自适应高度方案的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • vue data变量相互赋值后被实时同步的解决步骤

    vue data变量相互赋值后被实时同步的解决步骤

    这篇文章主要介绍了vue data变量相互赋值后被实时同步的解决步骤,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 详解Vue串联过滤器的使用场景

    详解Vue串联过滤器的使用场景

    这篇文章主要介绍了详解Vue串联过滤器的使用场景,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04

最新评论