¿Cuál es el principio del enlace de datos bidireccional en vue?
El enlace de datos bidireccional de Vue se logra mediante el secuestro de datos combinado con el modelo editor-suscriptor. Veamos un ejemplo a continuación.
var?obj?=?{}?Object.defineProperty(obj,'nombre',{get:function(){console.log("got");} ,set:function(){console.log('modificado');}})obj.name?=? Se puede utilizar para controlar ciertas operaciones en las propiedades de un objeto, como los permisos de lectura/escritura y si se pueden enumerar.
Pensamiento y análisis
La implementación de mvvm incluye principalmente dos aspectos, actualizar la vista cuando cambian los datos y actualizar los datos cuando cambia la vista:
MOOC de tres personas
El punto clave es cómo actualizar los datos de la vista, porque los datos actualizados de la vista en realidad se pueden implementar escuchando eventos, como escuchar el evento de "entrada" de la etiqueta de entrada. 'El evento se puede lograr. Entonces, centrémonos en cómo se actualiza la vista cuando cambian los datos.
El objetivo de la vista de actualización de datos es cómo saber que los datos han cambiado. Siempre que sepa que los datos han cambiado, lo siguiente será más fácil de manejar. ¿Cómo saber que los datos han cambiado? De hecho, ya hemos dado la respuesta anterior, que es establecer una función establecida en la propiedad a través de Object.defineProperty (
). los datos cambian, por lo que solo necesitamos colocar algunos métodos de actualización aquí para implementar la vista de actualización de datos.
Tres personas buscan consejo
Ahora que tenemos la idea, el siguiente paso es hacerla realidad.
Proceso de implementación
Ya sabemos que para lograr el enlace bidireccional de datos, lo primero que debemos hacer es secuestrar la escucha de datos, por lo que necesitamos configurar un observador de escucha. para escuchar toda la propiedad. Si hay un cambio en el atributo, debe informar al suscriptor y al observador si es necesario actualizarlo. Dado que hay muchos suscriptores, necesitamos un departamento de suscriptores de mensajes para recopilar estos suscriptores y luego administrarlos de manera uniforme entre los observadores oyentes y los observadores suscriptores. A continuación, necesitamos un analizador de comandos Compile para escanear y analizar cada elemento del nodo, inicializar los comandos relevantes en el observador del suscriptor y reemplazar los datos de la plantilla o vincular la función correspondiente. En este momento, el observador del suscriptor recibe el atributo correspondiente Cuando cambia, se ejecutará la función de actualización correspondiente para actualizar la vista. A continuación, realizamos los siguientes 3 pasos para implementar el enlace de datos bidireccional:
1. Implementar un observador de escucha para secuestrar y escuchar todas las propiedades y notificar a los suscriptores cuando haya algún cambio.
2. Implementar un observador de suscriptores para recibir notificaciones de cambios de propiedad y ejecutar funciones apropiadas 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:
Catequesis de tres personas
función?objServer(obj){?let?keys?=?Object.keys( obj) ;keys.forEach((item)=>{?definidoActive(obj, obj[item]){? item,obj[item])})return?obj;?｝function?definidoActive(obj,item,val) {Object .defineProperty(obj,item,{get(){console.log(`${item} got`)},set(newVlaue){val?=?newVlaue;console.log(`${item}ha sido modificado`) }})}?let?obj?=?objServer({a:1,b:2})?obj.aobj.b?obj.a?=?