如何在vue中没有引用的情况下复制json对象？

Question

在我的组件中，我声明了一些这样的数据：

data() {
    return {
        defaultValue: {json object with some structure},
        activeValue: {}
        ...

在组件方法中，make 复制此值：

this.activeValue = this.defaultValue

但问题是，在更改this.activeValue值之后，a 也发生了变化this.defaultValue。

如果我使用Object.freeze(this.defaultValue)并尝试更改，this.activeValue则会出现错误 - 对象不可写。

我如何复制数据但没有参考？

Answer 1

如果你有简单的对象，最快最简单的方法就是使用 JSON.parse 和 JSON.stringify；

const obj = {};

const objNoReference = JSON.parse(JSON.stringify(obj));

Answer 2

this.activeValue = { ...this.defaultValue }

如果您没有嵌套对象，使用 ES6 扩展运算符将帮助您进行复制。如果使用等号 = 进行相等，则不会创建新对象，而只会创建一个引用当前对象的变量（如浅表副本）。

要进行完整的深复制，即使它是嵌套对象，也可以这样做：

 const objNoReference = JSON.parse(JSON.stringify(obj));

正如猫头鹰建议的那样。

术语存在混乱。`{ ...this.defaultValue }` 不是解构语法，而是扩展语法。它创建一个浅而不深的副本 - 除非您使用 `{ ...this.defaultValue, foo: { ...this.defaultValue.foo } }` 显式执行此操作。`=` 通过引用复制并且不进行浅复制。 (2认同)
JSON 方法删除了“Map”和“Regex”等数据类型以及 stringfy“Date” 很可能会导致错误 (2认同)

Answer 3

JSON.stringify 比使用 JSON.parse 更好的方法是：

this.activeValue = {...this.defaultValue}

但这并不被某些浏览器（IE）原生支持，除非与转译器（babel）一起使用

更新

考虑到你最初的问题是关于 Vue 中的一种方法，vue 中还有一个本机方法：

this.activeValue = Vue.util.extend({}, this.defaultValue)

希望这可以帮助！