[Dúvida] - Angular, referência profunda · Danilin86

Esses dias estava trabalhando em um projeto Angular e me deparei com um probleminha que até foi resolvido mas não foi entendido o motivo do problema.

normalmente quando passo valores de um componente para outro utilizo o @Input() para isso, e quando não quero que a referência seja utilizada eu faço a desconstrução do objeto:
this.semReferencia = {...objeto}
Na maioria das vezes somente essa desconstrução resolve meu problema, mas recentemente não resolveu, a solução encontrada para resolver essa referência foi utilizando o seguinte código:
this.semReferencia = JSON.parse(JSON.stringify(objeto))

Gostaria de saber se alguém já passou por isso e se conseguiria me explicasse o motivo disso.

Sem mais detalhes, o máximo que dá pra fazer é especular.

Bom, meu palpite: pode ter acontecido algo relacionado ao fato do spread criar uma shallow copy (cópia "rasa"). Ou seja, apesar de criar outro objeto, as propriedades dele continuam apontando para os objetos originais. Um exemplo:

const obj = {
    'dados': { 'nome': 'fulano', 'idade': 42},
    'endereco': { 'logradouro': 'avenida', 'nome_logradouro': 'sbruble', 'numero': 123, 'bairro': 'Vila Abc' }
};

// faço a cópia
const copia = { ...obj };
console.log(copia); // mostra os dados iguais ao objeto original

// mudo um dos objetos internos do original
obj.dados.idade = 50;

// a alteração se reflete na cópia
console.log(copia); // a idade foi alterada para 50

Se fizermos a cópia do outro jeito, isso não acontece mais, pois os objetos internos não serão mais os mesmos:

const obj = {
    'dados': { 'nome': 'fulano', 'idade': 42},
    'endereco': { 'logradouro': 'avenida', 'nome_logradouro': 'sbruble', 'numero': 123, 'bairro': 'Vila Abc' }
};

// faço a cópia
const copia = JSON.parse(JSON.stringify(obj));
console.log(copia); // mostra os dados iguais ao objeto original

// mudo um dos objetos internos do original
obj.dados.idade = 50;

// agora a alteração não se reflete na cópia
console.log(copia); // a idade continua 42

Agora, se o seu problema se resolveu por causa disso, só tendo mais detalhes pra saber.

Como curiosidade, você também pode usar structuredClone(obj) em vez de JSON.parse e JSON.stringify. As diferenças estão listadas aqui.