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

Zahara ·

更新时间:2024-11-14

· 1475 次阅读

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。

VUE 深拷贝拷贝

1024 个赞