Vue Learning Series I: principios básicos de implementación del sistema responsivo MVVM
MVVM es la abreviatura de Model-View-ViewModel. Es una versión evolucionada de MVC-gt;
El modelo es responsable de representar objetos JavaScript y la Vista es responsable de mostrar la interfaz UI. Los dos están separados al máximo.
El Modelo y la Vista están asociados con ViewModel, que es responsable de sincronizar los datos del Modelo a la Vista y sincronizar los cambios de la interfaz de la Vista al Modelo para actualizar los datos.
Comprobación de valores sucios: angular.js utiliza la comprobación de valores sucios para comparar los cambios de datos y decidir si se actualiza la vista.
El principio es mantener una copia de copy_viewModel en la memoria. Cuando la operación del usuario hace que viewModel cambie, el marco comparará profundamente copy_viewModel con el último viewModel si se encuentra que tiene un atributo. cambiado, se restablecerá. Representa el nodo DOM vinculado a él.
La forma más sencilla es sondear cambios en los datos usando setInterval(), que será activado por angular para detectar valores sucios. Pero solo se aplica a eventos específicos (como clics del usuario, operaciones de entrada, solicitudes ajax, setInterval, setTimeout, etc.). De lo contrario, deberá llamar manualmente a la función de la aplicación para forzar la verificación sucia.
Secuestro de datos: vue.js utiliza el secuestro de datos en combinación con el modelo editor-suscriptor, en el que Object.defineProperty() secuestra el definidor y el captador de cada propiedad y lo publica para el suscriptor cuando los datos cambian. Los mensajes activan las devoluciones de llamadas del oyente correspondiente para actualizar datos y vistas. El resultado son datos y vistas actualizados.
Este diagrama nos dice que el atributo de datos define el captador y el definidor utilizados para secuestrar el atributo. Cuando el valor del atributo cambie, notificará al objeto de observación, y el objeto de observación reactivará el componente. Procesa y luego actualiza el árbol de nodos DOM en la vista.
Por el contrario, cuando se ingresan datos en la vista, también se activarán cambios en los datos, lo que también activará actualizaciones de monitoreo de suscriptores, de modo que los datos del modelo se puedan actualizar en tiempo real en función de los cambios en los datos. en la vista. Este es el proceso de enlace de datos bidireccional de vue.
Vue es un método de enlace de datos mediante el secuestro de datos. El método principal es secuestrar propiedades para monitorear los cambios de datos a través de Object.defineProperty().
Object.defineProperty es un método ES5 que define nuevas propiedades o modifica las propiedades existentes directamente en un objeto y devuelve el objeto. Hay dos formas principales de descriptores de propiedad en los objetos: descriptores de datos y descriptores de acceso.
Un descriptor de datos es una propiedad que tiene un valor escribible o no escribible.
Un descriptor de acceso es una propiedad descrita por un par de funciones getter-setter.
El descriptor de acceso debe tener una de dos formas, pero no ambas al mismo tiempo. Es decir: evaluable y escribible, u obtenible y configurable
Los descriptores de propiedad incluyen:
Ya sabemos cómo implementar el enlace bidireccional de datos. Primero, necesitamos secuestrar los datos. para ser monitoreado, por lo que necesitamos configurar un observador oyente para monitorear todas las propiedades. Si una propiedad cambia, debemos informarle al suscriptor si es necesario actualizar el observador.
Dado que hay muchos suscriptores, necesitamos un Depber de suscriptor de mensajes para recopilar estos suscriptores y administrarlos de manera uniforme entre observadores oyentes y observadores de suscriptores. Luego, también necesitamos un analizador de comandos Compile, que 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 cuando el observador del suscriptor reciba Cuando la propiedad correspondiente cambia, ejecutará la función de actualización correspondiente para actualizar la vista.
Por lo tanto, a continuación realizamos los siguientes cuatro pasos para implementar el enlace bidireccional de datos:
Comprender profundamente el principio de capacidad de respuesta
Analizar el principio de Vue amp; Implementación del enlace bidireccional de MVVM
Principios básicos de sistemas responsivos.js
Solo quiero monitorear la implementación de JavaScript de MVVM para detectar cambios en un objeto común