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

目录
  • vue对象复制
    • 更新
    • 我的理解
  • vue对象复制的坑--对象深度拷贝
    • 错误描述
    • 解决办法

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 则不会影响原对象。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue关于对象直接赋值的坑及解决

    Vue关于对象直接赋值的坑及解决

    目录 Vue对象直接赋值的坑 Vue对象的赋值Object.assign({}, row) Vue对象直接赋值的坑 受JavaScript的限制,Vue不能监听到对象属性的添加或删除.如果这样做了,你会发现添加或删除的属性不是响应式的,即无法及时更新视图. 如果我们需要将a对象赋值给b对象时,要么把b对象的所有属性都在a对象中定义一下,要么 使用this.$set(this.object,key,value)将b对象中有a对象中没有的属性set进去,或者使用Object.assign(this.

  • vue对象的深度克隆方式

    目录 vue对象的深度克隆 方法1 方法2 方法3 vue克隆对象时遇到的问题 vue对象的深度克隆 方法1 通过js序列化,将js转换成字符串,然后再将字符串转换成js对象 var olbObj = {a:1}; var str = JSON.stringify(obj); //序列化对象 var newobj = JSON.parse(str); //还原 //相当于 var newObj = JSON.parse(JSON.stringify(olbObj )) 方法2 ES6语法对象展开

  • Vue3响应式对象Reactive和Ref的用法解读

    目录 一.内容简介 二.Reactive 1. 关键源码 2. 源码流程分析 三.代理拦截操作 1. 数组操作 2.Get操作 3. Set操作 4. 其余行为拦截操作 四.Ref对象 1. 思考一个问题 2. 简要说明 3. 关键源码 四. 源码解析 五.总结 一.内容简介 本篇文章着重结合源码版本V3.2.20介绍Reactive和Ref.前置技能需要了解Proxy对象的工作机制,以下贴出的源码均在关键位置备注了详细注释. 备注:本篇幅只讲到收集依赖和触发依赖更新的时机,并未讲到如何收集依赖

  • vue如何查找数组中符合条件的对象

    目录 查找数组中符合条件的对象 根据id找出数组里的对象 查找数组中符合条件的对象 let val = 1; let list = [ {id:1,name:'张三'}, {id:2,name:'李四'}, {id:3,name:'王五'}, ]; let arr = list.filter((i) => { return val == i.id; }); 根据id找出数组里的对象  dsChange(id){       let selectedName = {};       selecte

  • vue3接口数据赋值对象,渲染报错问题及解决

    vue3接口数据赋值对象,渲染报错问题及解决

    目录 vue3接口数据赋值对象,渲染报错 vue在渲染数据的时候的一些报错问题 问题描述 解决方法 vue3接口数据赋值对象,渲染报错 const app = require('express')() // 跨域设置 app.all("*", function (req, res, next) { res.setHeader("Access-Control-Allow-Credentials", true); res.setHeader("Access-C

  • vue路由传参接收以及传参对象为对象时的问题及解决

    目录 路由传参接收以及传参对象为对象时的问题 场景 接收路由参数 vue路由传参总结 Vue路由传参 路由传参接收以及传参对象为对象时的问题 具体代码如下所示: 场景 <div @click='toDetail'>查看详情</div> 路由传参不能直接传一个对象,需要使用JSON.stringify()方法将其转换成一个字符串,然后在其他页面接受的时候再使用JSON.parse()方法转换成一个对象 const router = useRouter() const toDetail

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

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

    目录 vue对象复制 更新 我的理解 vue对象复制的坑--对象深度拷贝 错误描述 解决办法 vue对象复制 使用:es6中的“对象扩展运算符 ”,如下 // 对象深拷贝 obejctCopy() { // 源对象小李 const source = { name: '小李', age: 18, gender: '男', school: '清华大学' } // 拷贝小李 const copy1 = { ...source } // 拷贝小李,并修改名字为小张 const copy2 = { ...

  • vue利用v-for嵌套输出多层对象,分别输出到个表的方法

    如下所示: specifications:[ { specificationName:"颜色", specificationItem:[ {value:"黄色"}, {value:"黑色"} ] } ] <table class="table table-bordered table-hover table-item spggdytable" id="ggxtable" v-show="is

  • php5对象复制、clone、浅复制与深复制实例详解

    本文实例讲述了php5对象复制.clone.浅复制与深复制.分享给大家供大家参考,具体如下: 对象复制的由来 为什么对象会有"复制"这个概念,这与PHP5中对象的传值方式是密切相关的,让我们看看下面这段简单的代码 PHP代码 /** * 电视机类 */ class Television { /** 屏幕高度 */ protected $_screenLength = 300; /** 屏幕宽度 */ protected $_screenHight = 200; /** 电视机外观颜色

  • SpringBoot如何进行对象复制的实践

    SpringBoot如何进行对象复制的实践

    目录 为什么需要对象复制 对象复制工具类推荐 Orika基本使用 引入依赖 Orika工具类使用文档 TC1,基础实体映射 TC2,实体映射 - 字段转换 TC3,基础集合映射 TC4,集合映射 - 字段映射 TC5,集合与实体映射 TC6,类类型映射 TC7,多重映射 TC8,MyBaits plus分页映射 小结 首先我们看看为什么需要对象复制? 为什么需要对象复制 如上,是我们平时开发中最常见的三层MVC架构模型,编辑操作时Controller层接收到前端传来的DTO对象,在Service

  • JS对象复制(深拷贝和浅拷贝)

    一.浅拷贝 1.Object.assign(target,source,source...) a.可支持多个对象复制 b.如果source和target属性相同 source会复制target的属性 c.target只能为Object对象 var obj = {a:1,b:2} undefined Object.assign({c:3},obj) {c: 3, a: 1, b: 2} obj {a: 1, b: 2} 兼容性写法if(Object.assign){//兼容}else{//不兼容}

  • MapStruct对象映射转换解决Bean属性拷贝性能问题

    MapStruct对象映射转换解决Bean属性拷贝性能问题

    目录 简介 适用场景 工作时机 使用案例 1.添加依赖 2.定义两个类 3.单元测试 核心总结 简介 MapStruct 是一个代码生成器(可以生成对象映射转换的代码),它基于约定优于配置的方法,极大地简化了 Java bean 类型之间的映射实现. 生成的映射代码使用普通的方法调用,因此速度快.类型安全且易于理解. 适用场景 多层应用程序通常需要在不同的对象模型(例如实体和 DTO)之间进行映射.编写这样的映射代码是一项乏味且容易出错的任务.MapStruct 旨在通过尽可能地自动化来简化这项

  • 深入理解Java对象复制

    深入理解Java对象复制

    一.图示 二.MapStruct pom文件 <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.12</version> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artif

  • 深入java对象复制的分析

    java本身提供了对象复制的能力,在java.lang.Object类中有clone方法,该方法是一个protected方法,在子类需要重写此方法并声明为public类型,而且还需实现Cloneable接口才能提供对象复制的能力,clone()是一个native方法,native方法的效率一般来说都是远高于java中的非native方法,对性能比较关心的话首先考虑这种方式,这种复制在网上有很多例子就不多写了:在这要用的另一种方式--通过java的反射机制复制对象,这种方式效率可能会比clone(

  • 解决vue无法侦听数组及对象属性的变化问题

    一.数组 1.可以监听到的情况 如push.splice.=赋值(array=[1,2,3]) 2.无法监听到的情况 使用下标修改某个元素(这种比较常见) array[index] = 1 object.a = 3 直接修改数组length array.length = 5 3.解决方案 this.$set(array, index, data) - 这是个深度的修改,某些情况下可能导致你不希望的结果,因此最好还是慎用 this.dataArr = this.originArr this.$se

  • 深入理解JavaScript中的对象复制(Object Clone)

    JavaScript中并没有直接提供对象复制(Object Clone)的方法.因此下面的代码中改变对象b的时候,也就改变了对象a. a = {k1:1, k2:2, k3:3}; b = a; b.k2 = 4; 如果只想改变b而保持a不变,就需要对对象a进行复制. 用jQuery进行对象复制 在可以使用jQuery的情况下,jQuery自带的extend方法可以用来实现对象的复制. a = {k1:1, k2:2, k3:3}; b = {}; $.extend(b,a); 自定义clone

随机推荐