Comment copier un objet json sans référence dans Vue ?

Question

Dans mon composant j'ai déclaré des données comme ceci :

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

Et dans les méthodes des composants on fait une copie de cette valeur :

this.activeValue = this.defaultValue

Mais le problème est qu'après le changement this.activeValue valeur a ont des changements dans this.defaultValue aussi.

Si j'utilise Object.freeze(this.defaultValue) et essayer de changer this.activeValue J'ai obtenu l'erreur - object is not writable.

Comment puis-je faire une copie des données mais sans référence ?

Answer 1

Si vous avez un objet simple, le moyen le plus rapide et le plus facile est d'utiliser JSON.parse et JSON.stringify ;

const obj = {};

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

Answer 2

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

L'utilisation d'un opérateur d'étalement ES6 vous permettra d'effectuer une copie si vous n'avez pas d'objet imbriqué. Si vous mettez en équation en utilisant le signe =, cela ne créera pas un nouvel objet, mais simplement une variable avec la référence à l'objet actuel (comme une copie superficielle).

Pour faire une copie complète et profonde, même s'il s'agit d'un objet imbriqué, choisissez ceci :

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

comme suggéré par le Hibou.

Cliquez pour lire la suite afin de mieux comprendre le concept.

Answer 3

Une façon plus agréable d'utiliser JSON.parse, JSON.stringify plutôt que d'utiliser JSON.parse est :

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

mais ceci n'est pas supporté nativement par certains navigateurs (IE), à moins d'être utilisé avec un transpilateur (babel).

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

Mise à jour

Considérant que votre question originale concerne une méthode dans Vue, il existe également une méthode native dans Vue :

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

quant à cette réponse.

J'espère que cela vous aidera !

Answer 4

Vous pouvez utiliser 'JSON.parse and stringify' ou utiliser une fonction clone dans les librairies, par exemple lodash (soulignement, ramda...)

Answer 5

Les objets sont assignés et copiés par référence.

Toutes les opérations effectuées via des références copiées (comme l'ajout ou la suppression de propriétés) sont réalisées sur le même objet unique.

Pour faire un “real copy” (un clone), nous pouvons utiliser Object.assign pour le soi-disant “shallow copy” (les objets imbriqués sont copiés par référence).

Pour “deep cloning” utiliser _.cloneDeep(obj) de loadash bibliothèque.