Un concepto mutable
Antes de eso, primero resolvemos elmutable
mutable representa un objeto de tipo mutable. Proporciona operaciones que pueden cambiar su valor de datos internos y su valor interno se puede cambiar nuevamente.
Vue utiliza fuentes de datos variables como concepto central para realizar toda la actualización de cambios de la interfaz de usuario
| mutable (tipo de variable) | inmutable (tipo inmutable) | |
| ventaja | Reduzca el número de copias de datos y logre una mayor eficiencia | Los datos internos son inmutables, lo que los hace más seguros y se pueden usar como un objeto compartido de subprocesos múltiples, sin tener que considerar problemas de sincronización. |
| defecto | Los datos internos son variables, lo que conlleva un mayor riesgo | Los datos internos son inmutables y las modificaciones frecuentes generarán una gran cantidad de copias temporales para desperdiciar espacio |
La forma más sencilla de decirlo es: inicialice los datos para generar la página, modifique directamente los datos de origen para activar la actualización y la página se vuelve a renderizar.
Dos defineProperty
Cuando usamos vue2, a menudo nos encontramos con un problema. Agregar nuevas propiedades de objeto obj.a = 1no será secuestrado por vue2, y debemos usar los métodos proporcionados por vue2 $setpara actualizar.
Porque cuando agregamos una propiedad al objeto a, aunque se genera con éxito una nueva propiedad en el objeto correspondiente, vue2 secuestra datos a través del setter y getter de defineProperty, y los datos recién agregados no se secuestran. Así que no importa qué tan actualizada, la página todavía no se volverá a renderizar
(La razón de esto es que defineProperty solo puede secuestrar una de las propiedades del objeto actual)
const a = {
b: 1,
};
Object.defineProperty(a, 'b', {
set: function() {},
get: function() {},
});
tres apoderados
En vue3, usar proxy para proxy de datos no tiene esta preocupación en absoluto
El proxy para el proxy de datos puede responder a nuevos atributos. Cuando se agrega un nuevo atributo, puede responder para obtener y representar el objeto actual.
const p = new Proxy({
a: 1,
b: 2,
}, {
get: function(obj, value) {
console.log('get', obj, value);
return Reflect.get(obj, value);
},
set: function(obj, prop, value) {
console.log('set', obj, prop, value);
return Reflect.set(obj, prop, value);
},
})