Как скопировать объект json без ссылки в vue?

Question

В моем компоненте я объявил некоторые данные вроде этого:

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

И в методах компонента сделайте копию этого значения:

this.activeValue = this.defaultValue

Но проблема в том, что после изменения this.activeValue значение a также изменилось в this.defaultValue.

Если я использую Object.freeze(this.defaultValue) и пытаюсь изменить this.activeValue, я получаю сообщение об ошибке - объект не доступен для записи.

Как я могу сделать копию данных, но без ссылки?

Answer 1

Более приятный способ, чем использование JSON .parse, JSON .stringify:

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

, но это изначально не поддерживается некоторыми браузерами (IE), если не используется с transpiler (babel)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Обновление

Учитывая, что ваш исходный вопрос касается пути в Vue , есть также собственный метод в vue:

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

как для этого ответа.

Надеюсь, это поможет!

Answer 2

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

Использование оператора распространения ES6 поможет вам сделать копию, если у вас нет вложенного объекта. Если вы приравниваете использование знака равенства =, он не создаст новый объект, он просто создаст переменную со ссылкой на текущий объект (например, мелкую копию).

Чтобы сделать полную глубокую копию, даже это вложенный объект, go для этого:

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

как было предложено Owl.

Нажмите, чтобы прочитать больше, чтобы лучше понять концепцию

Answer 3

Если у вас простой объект, самый быстрый и простой способ - просто использовать JSON .parse и JSON .stringify;

const obj = {};

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

Answer 4

Объекты назначаются и копируются по ссылке.

Все операции через скопированные ссылки (например, добавление / удаление свойств) выполняются с одним и тем же объектом.

Чтобы создать “real copy” ( клон) мы можем использовать Object.assign для так называемого “shallow copy” (вложенные объекты копируются по ссылке).

Для “deep cloning” используйте _.cloneDeep (obj) из loada sh библиотека.

Answer 5

Вы можете использовать 'JSON .parse and stringify' или использовать какую-либо функцию клонирования в библиотеках, например loda sh (подчеркивание, ramda ...)