Creo que por variable estás haciendo referencia a cuando esa variable es un objeto.
En el caso en el que hay una variable que cambia de valor, y es un numero, String, etc, no hay ningún problema en cambiarla de valor sea Vue, React, Angular, etc...
let una = 1;
let otra = una;
una = 5;
console.log(una);
console.log(otra);
El problema viene dado por que los objetos en JS al ser almacenados en variables se almacenan por referencia, ello implica que si cambiamos el valor de un atributo en un objeto almacenado en una variable, lo estamos cambiando de su referencia. Por lo tanto, cualquier otra variable que lo almacene verá el valor de ese atributo modificado de la misma manera, aunque no se cambie de forma explícita.
let persona = { nombre: "Pedro" };
let otraPersona = persona;
persona.nombre = "Juan";
console.log(persona);
// No he cambiado explicitamente otraPersona.nombre, sin embargo como otraPersona apunta a la misma referencia que persona, si lo cambio en uno, cambia en otro automáticamente.
console.log(otraPersona);
Por tanto, e insisto, independientemente del Framework o librería usados, este hecho es una característica de JS.
¿Como evitarlo?
Muy sencillo, clona el objeto en vez de copiarlo. Tienes varias formas, entre ellas te muestro dos bastante útiles, Object Assign y Spread Operator:
let persona = { nombre: "Pedro" };
// Object Assign
let otraPersona = Object.assign({}, persona);
// Spread Operator
let otraMas = { ...persona };
persona.nombre = "Juan";
console.log(persona);
console.log(otraPersona);
console.log(otraMas);
no
porque vue sea reactivo, mas bien por algo que es muy comun entre los lenguajes y se llamapaso por referencia
, cuando tu asignas avariable1
otra variable lo que esta haciendo vue es asignar enrealidad el puntero hacia esa misma direccion de memoria, por lo tanto ambas quedan ligadas, de tal forma que si cambias el valor de una tambien cambia el valor de la otra. – Riven el 19 jun. 20 a las 21:29