Implementación del enlace de datos bidireccional
El marco MVVM consta de tres componentes principales: modelo, vista y modelo de vista.
En resumen, la capa de controlador del marco (la capa de controlador es un término general, que puede entenderse como el middleware que controla el comportamiento de la vista y conecta la capa del modelo) y la capa de presentación de la interfaz de usuario ( capa de vista) se establecen un canal de datos bidireccional. Cuando se producen cambios en cualquiera de estas dos capas, los cambios correspondientes se producirán automáticamente en la otra capa.
En términos generales, para implementar este enlace de datos bidireccional, actualmente sé que hay tres formas en el front-end:
En Angular actual, la implementación convencional se basa en sucio de cheques. Cuando sucede algo específico, el marco llama al método de resumen relevante. La lógica interna es recorrer todos los observadores y comparar los atributos monitoreados. Si el valor cambia, se ejecuta el controlador apropiado.
Cuando el sistema ingresa a la fase de verificación sucia, atravesará todos los monitores vinculados a $ watch y luego comparará watcher.get() y watcher.last. Si son diferentes, ejecute el watcher.fn correspondiente. (valor nuevo, valor antiguo). Luego pasamos al siguiente observador.
¿Cuándo se realiza un cheque sucio?
Dado que regularjs se basa en comprobaciones sucias, es posible que necesite sincronizar manualmente los datos y las vistas cuando la forma en que se manipulan los datos no está controlada por el propio regularjs (por ejemplo, eventos, comandos). El método $update ayuda a sincronizar los datos con la capa de vista.
]( https://regularjs.github.io/reference?syntax-zh#bind-once ) controla el número de observadores.
Utilice el método ES7 Object.observe para monitorear un objeto (o sus propiedades) y ejecutar controladores cuando cambie. Esta es la mejor manera de monitorear los cambios en los datos de propiedad. Lo único que lamento es que la amplitud del apoyo no es suficiente y es necesario promoverlo plenamente.
El principio de enlace de datos bidireccional de vue.js y avalon.js es un descriptor de acceso de propiedad.
Utiliza el método Object.defineProperty en ES5 para definir propiedades estándar.
Ejemplo de uso de Object.defineProperty:
Primero, durante el proceso de creación de instancias, vuejs iterará a través de las opciones de datos pasadas a las opciones del objeto instanciado, iterará a través de todas sus propiedades y usará el Objeto .defineProperty convierte todas las propiedades en captadores/definidores.
Además, cada instancia tiene una instancia de observador, que utiliza captadores para acceder a las propiedades de los datos durante la compilación de la plantilla. El observador marca las propiedades de los datos utilizados como dependencias, estableciendo así una relación entre la vista y los datos. . Cuando las dependencias de datos de la vista renderizada cambian (es decir, se llama al configurador de datos), el observador compara los dos valores y decide si notificar a la vista para que se vuelva a renderizar. Esto se llama enlace de datos bidireccional.