[Vue] Modelo MVVM, proxy de datos

Model- View-ViewModel

• Model: datadatos en
• View:Análisis de plantillas-> DOMpágina
• ViewModel: Vueobjeto de instancia

vmEl contenido de puede ser Vuetodo el contenido del prototipo.

corredor de datosObject.defineproperty(参数1, 参数2, 参数3)

• Parámetro 1: objeto
• Parámetro 2: nombre del atributo
• Parámetro 3: elemento de configuración

Ejemplo de función: definir variables

let number = 18
let person = {
    
    
	name = "zhangsan"
}

Ejemplo de función: corredor de datos

Object.defineProperty(person, 'age', {
    
    
	get: function(){
    
    
		return number
	}
})

Características del agente de datos:

1. No enumerable, no puede participar en el recorrido, solución: enumerableestablezca el atributo en true, el valor predeterminado es falso
2. No modificable, solución: writableestablezca el atributo en true, el valor predeterminado es falso
3. No se puede eliminar, solución: configurableestablezca el atributo en true, el valor predeterminado es falso

Funciones de proxy de datos:

1. Limita los datos y mira sus características.
2. getFunción: cuando se lee el atributo del parámetro 1 (objeto), getse llamará a la función y el valor de retorno es el valor del parámetro 2 (nombre del atributo). Se llama a la función Invoke Property getterde atributo de mapeo .getgetter

El setter se puede entender de la misma manera:

Al modificar el parámetro 2 (nombre de propiedad) del objeto, se llamará a la función de establecimiento y se recibirá el valor modificado.

Object.defineProperty(person, 'age', {
    
    
	get: function(){
    
    
		return number
	}
	set(value){
    
    
		number = value
	}
})

Ejemplos de uso de proxy de datos

let obj = {
    
    x:100}
let obj2 = {
    
    y:200}
Object.defineProperty(obj2, 'x', {
    
    
	get(){
    
    
		return obj.x
	}
	set(value){
    
    
		return obj.x = value
	}
})

Vuecorredor de datos

1. Al vmleer name, ingresar vm.name, llamar getter, lo que se lee está vm._data.nameenname
2. Al vmcambiar name, cambiar vm.name, llamar setter, lo que se cambia está vm._data.nameenname

Verificar vm._dataque esté en los parámetros de compilación.data

vmAlmacene datalos datos en vm._datay vm._datael secuestro de datos no se puede verificar directamente. El secuestro de datos tiene como objetivo lograr capacidad de respuesta.

let data = {
    
    
	name = "zhangsan"
}

const vm = new Vue({
    
    
	el: '#root',
	data
})

Verifiablevm._data === data

VueComprensión profunda del agente de datos

1. vmNo vm.name, solo , pero se puede acceder vm._dataa través del agente de datos mediante entradavm.namevm._data.name

2. Sin un agente de datos, la interpolación debe escribirse como{ {_data.name}}

3. vmConsíguelo _data, agrega un atributo name, getterléelo , _datamodifícalonamesetter_dataname