iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue对象复制方式(深拷贝,多层对象拷贝方式在后面)
  • 320
分享到

vue对象复制方式(深拷贝,多层对象拷贝方式在后面)

2024-04-02 19:04:59 320人浏览 八月长安
摘要

目录Vue对象复制更新我的理解vue对象复制的坑--对象深度拷贝错误描述解决办法vue对象复制 使用:es6中的“对象扩展运算符 ”,如下 // 对象

vue对象复制

使用:es6中的“对象扩展运算符 ”,如下

    // 对象深拷贝
    obejctCopy() {
      // 源对象小李
      const source = { name: '小李', age: 18, gender: '男', school: '清华大学' }
      // 拷贝小李
      const copy1 = { ...source }
      // 拷贝小李,并修改名字为小张
      const copy2 = { ...source, name: '小张' }
      // 修改源对象
      source.age = 19
      // 查看结果
      console.log(source)
      console.log(copy1)
      console.log(copy2)
    }

结果:可见拷贝出来的对象,与源对象无关,深拷贝完成

更新

经网友指出,当对象中还包含对象时,则里层对象还是浅拷贝,验证代码

      // 源对象小李
      // const source = { name: '小李', age: 18, gender: '男', school: '清华大学' }
      const source = { name: '小李', age: 18, gender: '男', school: '清华大学', more: { a: "test", b: 2, c: {} } }
      // 拷贝小李
      const copy1 = { ...source }
 
      console.log(source === copy1)               // false
      console.log(source.more === copy1.more)     // true

若要里层拷贝则需要再次使用...,如下

      // 源对象小李
      // const source = { name: '小李', age: 18, gender: '男', school: '清华大学' }
      const source = { name: '小李', age: 18, gender: '男', school: '清华大学', more: { a: "test", b: 2, c: {} } }
      // 拷贝小李
      const copy1 = { ...source, more: { ...source.more } }
 
      console.log(source === copy1)               // false
      console.log(source.more === copy1.more)     // false

我的理解

==比较对象的时候还是比较的引用地址是不是同一个。在多层拷贝中,虽然“对more的引用”这个操作被复制了,但是引用指向的“more对象地址”还是同一个,内存中实际上只有一个“more”。因此要再次复制more才可以

vue对象复制的坑--对象深度拷贝

错误描述

使用vue store 存储的复杂对象,在其它文件中将其赋值给其他变量后,被赋值对象修改后,store中存储的对象也被修改了。。。

解决办法

如:depttreedata 为存储在store->getters中的非简单对象,将其拷贝给dept02data 对象可以写作:

let dept02data = JSON.parse(jsON.stringify(this.$store.getters.depttreedata));

之后引用dept02data 则不会影响原对象。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue对象复制方式(深拷贝,多层对象拷贝方式在后面)

本文链接: https://www.lsjlt.com/news/167098.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue对象复制方式(深拷贝,多层对象拷贝方式在后面)
    目录vue对象复制更新我的理解vue对象复制的坑--对象深度拷贝错误描述解决办法vue对象复制 使用:es6中的“对象扩展运算符 ”,如下 // 对象...
    99+
    2024-04-02
  • JS对象复制(深拷贝和浅拷贝)
    目录一、浅拷贝1、Object.assign(target,source,source...)2、扩展运算符(spread)二、深拷贝1、使用对象序列化 JSON.stringify...
    99+
    2024-04-02
  • Java对象复制(直接赋值,浅拷贝,深拷贝)
    目录 Java对象复制1,直接赋值2,浅拷贝3,深拷贝4,序列化拷贝 Java对象复制 将一个对象的引用复制给另一个对象,一共有三种方式。第一种是直接赋值,第二种方式是浅拷贝,第三种是...
    99+
    2023-08-31
    java
  • golang 对象深拷贝的常见方式及性能
    目录关于golang拷贝的概念完整代码总结关于golang拷贝的概念 Go语言中所有赋值操作都是值传递,如果结构中不含指针,则直接赋值就是深度拷贝;如果结构中含有指针(包括自定义指针...
    99+
    2024-04-02
  • JavaScript中方对象拷贝方法
    这篇文章主要讲解了“JavaScript中方对象拷贝方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript中方对象拷贝方法”吧! ...
    99+
    2024-04-02
  • js中对象深拷贝方法总结
    快速克隆(存在数据丢失问题) – JSON.parse/stringify 如果不在对象中使用Date、functions、undefined、Infinity、RegE...
    99+
    2022-11-13
    js对象深拷贝方法 js对象快速克隆 js原生实现对象深拷贝方法
  • 怎么在JavaScript中实现对象深拷贝
    这篇文章给大家介绍怎么在JavaScript中实现对象深拷贝,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。JavaScript是什么JS是JavaScript的简称,它是一种直译式的脚本语言,其解释器被称为JavaSc...
    99+
    2023-06-14
  • 怎么在jQuery中使用$.extend深拷贝对象
    这篇文章主要介绍“怎么在jQuery中使用$.extend深拷贝对象”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么在jQuery中使用$.extend深拷贝对象”文章能帮助大家解决问题。语法:j...
    99+
    2023-06-17
  • vue深拷贝的3种实现方式小结
    目录1、通过递归方式实现深拷贝2、JSON.parse(JSON.stringify(obj))3、jQuery的extend方法实现深拷贝拓展阅读vue深拷贝的其他实现方式总结vu...
    99+
    2023-02-21
    vue深拷贝的三种实现方式 vue实现深拷贝 vue 深拷贝
  • java中list对象拷贝至新的list对象并保持两个对象独立的方法
    在Java中,如果你想拷贝一个List对象到一个新的List对象,并且修改原来的List不影响新的List中的内容,有几种方法可以实现: 使用构造函数: 可以使用List的构造函数,传递原始List作...
    99+
    2023-09-14
    java list
  • js如何使用循环遍历对象方法实现浅拷贝
    这篇文章将为大家详细讲解有关js如何使用循环遍历对象方法实现浅拷贝,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。使用循环遍历对象方法(遍历对象的属性赋值给新对象)function shallow...
    99+
    2023-06-17
  • vue对象的深度克隆方式
    目录vue对象的深度克隆方法1方法2方法3vue克隆对象时遇到的问题vue对象的深度克隆 方法1 通过js序列化,将js转换成字符串,然后再将字符串转换成js对象 var olbOb...
    99+
    2024-04-02
  • Linux虚拟机怎么通过拷贝方式复制Oracle数据库
    本篇内容主要讲解“Linux虚拟机怎么通过拷贝方式复制Oracle数据库”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Linux虚拟机怎么通过拷贝方式复制Ora...
    99+
    2024-04-02
  • vue深度优先遍历多层数组对象方式(相当于多棵树、三级树)
    目录深度优先遍历多层数组对象比如树结构是这样的vue遍历包含数组的对象请求来拿到后数据格式是下面这种最终在html中这样遍历深度优先遍历多层数组对象 这个方法如果是对于下面的三级树的...
    99+
    2024-04-02
  • Vue对象和数据的强制更新方式
    目录对象和数据的强制更新数组更新强制更新更新数据并强制更新视图对象类型数组类型异步类型强制更新对象和数据的强制更新 数组更新 以下支持自动更新 push() //向后添加pop() ...
    99+
    2024-04-02
  • vue怎么通过props方式在子组件中获取相应的对象
    本文小编为大家详细介绍“vue怎么通过props方式在子组件中获取相应的对象”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue怎么通过props方式在子组件中获取相应的对象”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习...
    99+
    2023-06-30
  • vue如何通过props方式在子组件中获取相应的对象
    目录方法一所以就可以直接拿取方法二有时候会获取不到,可以用一个定时器来获取方法三深拷贝方法四利用watch监听这些方法主要是在这次做项目的过程中发现总结的来的,感觉也挺常用的,所以就...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作