Cuando vue usa push para agregar datos, cambiar uno de los datos hace que otros datos cambien en consecuencia
1. Al escribir un proyecto en segundo plano de vue, use push para agregar varias partes de los mismos datos a la matriz, modificar uno de los datos y otros los datos cambiarán en consecuencia.
El motivo de este problema es que la inserción no es un valor, sino una dirección, y todas las matrices apuntan a la misma dirección, al igual que data.itemList[0] y data.itemList[1], ambos apuntan a un elemento. Cada inserción equivale a cambiar la dirección de la matriz, por lo que cada elemento se convertirá en el contenido de la última inserción.
Cuando se usa push para agregar múltiples datos, los múltiples datos apuntan a la misma dirección de memoria, y modificar uno de los datos es equivalente a modificar el valor de la memoria apuntada, por lo que se cambia cada dato.
Al agregar
datos, el front-end establece un evento de clic addArr, y luego, cuando
se cambia un determinado elemento en la matriz de datos, este atributo de todos los subelementos en la matriz cambiará, afectando así los datos generales (
al modificar uno de ellos Cuando se cambia una parte de los datos, otros datos cambiarán en consecuencia)
addArr() {
//data中的obj的数据
// obj = {
// name:'aaa',
// sex:'未知',
// age:'18'
// }
//data中默认是空数组
// this.list = []
this.list.push(JSON.parse(JSON.stringify(this.obj)))
},
solución
método uno:
Los datos que se van a enviar cada vez se almacenan en otro espacio abierto por separado. Esto no hará que toda la matriz apunte a una dirección de memoria.
addArr() {
let obj = {
name:'aaa',
sex:'未知',
age:'18'
}
this.list.push(obj)
},
Método dos:
Copia profunda de JS, popularice la diferencia entre la copia profunda de JS y la copia superficial aquí. En
JavaScript, la copia superficial simplemente copia la dirección de memoria de los datos originales, lo que equivale a dos punteros de datos que apuntan a la misma dirección, y cualquier elemento de datos cambia, afectará al otro; mientras que los dos datos de la copia profunda apuntan a direcciones diferentes, cualquier cambio en un elemento no afectará al otro. Por lo tanto, el uso razonable de la copia profunda de JS puede resolver el problema de la contaminación de datos causada por múltiples datos que apuntan a la misma dirección de memoria. Modificar uno de los datos es equivalente a modificar el valor de la memoria apuntada, lo que resulta en el cambio de cada dato.
addArr() {
this.list.push(JSON.parse(JSON.stringify(this.obj)))
}