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

 更新时间:2022年09月08日 08:44:30   作者:因为你不会,所以你才会  
这篇文章主要介绍了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 则不会影响原对象。

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

相关文章

  • 使用vue项目配置多个代理的注意点

    使用vue项目配置多个代理的注意点

    这篇文章主要介绍了使用vue项目配置多个代理的注意点,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-07-07
  • ant-design-vue中tree增删改的操作方法

    ant-design-vue中tree增删改的操作方法

    这篇文章主要介绍了ant-design-vue中tree增删改的操作方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-11-11
  • vue+elementui实现动态控制表格列的显示和隐藏

    vue+elementui实现动态控制表格列的显示和隐藏

    这篇文章主要介绍了vue+elementui实现动态控制表格列的显示和隐藏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 详解如何将 Vue-cli 改造成支持多页面的 history 模式

    详解如何将 Vue-cli 改造成支持多页面的 history 模式

    本篇文章主要介绍了详解如何将 Vue-cli 改造成支持多页面的 history 模式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • vue.js项目 el-input 组件 监听回车键实现搜索功能示例

    vue.js项目 el-input 组件 监听回车键实现搜索功能示例

    今天小编就为大家分享一篇vue.js项目 el-input 组件 监听回车键实现搜索功能示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue前端编译报错的图文解决方法

    vue前端编译报错的图文解决方法

    Vue框架可以很方便的引入各种插件,但是也因此会经常遇到种编译报错,这篇文章主要给大家介绍了关于vue前端编译报错解决的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • vue中vite.config.js配置跨域以及环境配置方式

    vue中vite.config.js配置跨域以及环境配置方式

    这篇文章主要介绍了vue中vite.config.js配置跨域以及环境配置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue中虚拟DOM的简单实现

    Vue中虚拟DOM的简单实现

    Vue中的虚拟DOM是通过JavaScript对象来描述真实DOM结构的一种方式,本文将介绍Vue中虚拟DOM的简单实现,具有一定的参考价值,感兴趣的可以了解一下
    2023-05-05
  • Ant Design Vue 走马灯实现单页多张图片轮播效果

    Ant Design Vue 走马灯实现单页多张图片轮播效果

    这篇文章主要介绍了Ant Design Vue 走马灯实现单页多张图片轮播,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-07-07
  • 基于vue.js实现图片轮播效果

    基于vue.js实现图片轮播效果

    这篇文章主要为大家详细介绍了基于vue.js实现图片轮播效果,vue如何实现轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12

最新评论