Cómo llamar al enlace bidireccional de VUE
1.Implemente un observador de escucha, que secuestra y escucha todas las propiedades y notifica a los suscriptores cuando se producen cambios.
2. Implementar un observador de suscriptor (Watcher), que recibe notificaciones de cambios de propiedad y ejecuta las funciones correspondientes para actualizar la vista.
3. Implemente el analizador Compile, que escaneará y analizará las instrucciones relevantes de cada nodo, inicializará los datos de la plantilla e inicializará los suscriptores correspondientes.
El diagrama de flujo es el siguiente:
1. Implementar el observador
El observador es un oyente de datos y el método central de su implementación es el Objeto. defineProperty mencionado anteriormente (). Si desea escuchar todas las propiedades, puede recorrer de forma recursiva todos los valores de las propiedades y procesarlos utilizando Object.defineProperty ().
función defineReactive(data, key, val) {
observe(val); // Recorre recursivamente todas las subpropiedades Object.defineProperty( )defineProperty(data, key, {
p>
enumerable: verdadero,
configurable: verdadero,
obtener: función() { return val; ,
set: function(newVal) {
val = newVal;
console.log('Property 'key 'ha sido escuchada, el valor es ahora: "' newVal. toString() '"');
}
});
}
} función observar (datos) { if (!datos || tipo de datos! == 'objeto') { retorno
}
Objeto.keys(datos).forEach(función(clave) {
defineReactive(datos, clave, datos[clave]);
}
};
libro1: {
nombre: ''
},
libro2: ''};
observe(library);
library.book1.name = 'La guía definitiva de vue'; // El nombre de la propiedad ha sido monitoreado y el valor actual es: 'La guía definitiva de vue' biblioteca.book2 = 'No existe tal libro'; ?//La propiedad libro2 ha sido monitoreada y el valor actual es: "No existe tal libro":"
Desde un análisis lógico, es necesario crear un Dep de suscriptor de mensajes que puede acomodar suscriptores, que es principalmente responsable de recopilar suscriptores y luego ejecutar la función de actualización del suscriptor correspondiente cuando la propiedad cambia.
Por lo tanto, el suscriptor obviamente necesita un contenedor, que es la lista, que es una versión ligeramente modificada del observador anterior y se implanta en el suscriptor del mensaje:
función defineReactive(data, key, val) {
observe(val); // Recorre recursivamente todas las subpropiedades
var dep = new Dep();
Object.defineProperty(data, key, val) ) {
Objeto.defineProperty(datos, clave, valor);
Objeto.defineProperty(datos, clave, valor) {
Objeto. , clave, val);
Object.defineProperty(datos, clave, val) defineProperty(datos, clave, {
enumerable: verdadero,
configurable: verdadero,
get: function() { if (es necesario agregar un suscriptor) {
dep.addSub(watcher); // Agregar un suscriptor aquí} return val;
},
set: function(newVal) { if (val === newVal) { return;
}
val = newVal
console.log('La propiedad 'key' ha sido escuchada, el valor ahora es: "' newVal.toString() '"'); / Si los datos cambian, se notificará a todos los suscriptores}
});
}
function Dep() { this.subs = [ ];
}
Dep.prototype = {
addSub: function(sub) { this.subs.push(sub);
} ,
notificar: función() { this.subs.forEach(función(sub) {
sub.update();
}) ;
}
};
Desde el código, colocamos el diseño de agregar suscriptores al Dep de suscriptor en el captador, que es inicializar el Vigilante como un disparador. por lo que debe determinar si desea agregar suscriptores. En cuanto a las opciones de diseño específicas, se presentarán en detalle a continuación. Dentro de la función de establecimiento, si los datos cambian, notificará a todos los suscriptores y los suscriptores ejecutarán la función de actualización correspondiente. Hasta ahora, se ha implementado un observador completo, comencemos a diseñar el observador.