Vue Learning Series I: Principios básicos de implementación del sistema de respuesta MVVM
El modelo es responsable de representar objetos JavaScript y la Vista es responsable de mostrar la interfaz UI. Los dos están separados en la mayor medida.
El modelo de vista conecta el modelo y la vista. ViewModel es responsable de sincronizar los datos del modelo con la vista para su visualización, y también es responsable de sincronizar las modificaciones de la interfaz de la vista con el modelo para actualizar los datos.
Verificación de valor sucio: angular.js usa la verificación de valor sucio para comparar si los datos han cambiado y decidir si se actualiza la vista.
El principio es que cuando una copia de copy_viewModel se almacena en la memoria, cuando la operación del usuario hace que viewModel cambie, el marco comparará profundamente Copy_viewModel con el último viewModel una vez que encuentre los atributos. ha cambiado, se volverá a representar el nodo DOM vinculado a él.
El método más simple es sondear periódicamente para detectar cambios en los datos a través de setInterval() e ingresar la detección de valores sucios cuando se activa el ángulo. Sin embargo, solo se permiten eventos específicos (como clics del usuario, operaciones de entrada, solicitudes ajax, setInterval, setTimeout, etc.). De lo contrario, es necesario llamar manualmente a la función de aplicación para forzar la verificación sucia.
Secuestro de datos: vue.js utiliza el secuestro de datos combinado con el modelo editor-suscriptor para secuestrar los configuradores de varias propiedades a través de Object.defineProperty(). Cuando los datos cambian, el captador publica mensajes a los suscriptores y activa las devoluciones de llamadas de monitoreo correspondientes para actualizar los datos y las vistas.
El diagrama esquemático nos dice que los atributos de datos definen captadores y definidores para secuestrar atributos. Cuando el valor de la propiedad cambie, se notificará al objeto de vigilancia, y el objeto de vigilancia activará la función de representación del componente nuevamente y luego actualizará el árbol de nodos DOM en la vista.
Por otro lado, cuando se ingresan datos en la vista, también se activan cambios de datos y actualizaciones de observaciones de suscriptores para que los datos del modelo se puedan actualizar en tiempo real con los cambios de datos en la vista. Este proceso es el enlace de datos bidireccional de Vue.
Vue utiliza el secuestro de datos para el enlace de datos. El método principal es secuestrar propiedades a través de Object.defineProperty() para monitorear los cambios de datos.
Object.defineProperty es un método de ES5 que puede definir directamente una nueva propiedad en un objeto, o modificar una propiedad existente y devolver 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 debe tener una de dos formas; no ambas al mismo tiempo. Es decir, hay valores y escrituras, o get y set.
Los descriptores de atributos incluyen:
Ya sabemos cómo implementar el enlace bidireccional de datos. Primero, necesitamos secuestrar y monitorear los datos, por lo que necesitamos configurar un observador que escuche para monitorear todas las propiedades. Si la propiedad cambia, debe informarle al observador del suscriptor para ver si es necesario actualizarla. Debido a que hay muchos suscriptores, necesitamos tener un departamento de suscriptores de mensajes para recopilar estos suscriptores y luego administrarlos de manera uniforme entre el observador oyente y el observador suscriptor. Luego, necesitamos un analizador de directivas, Compile, que escanea y analiza cada elemento del nodo, inicializa la directiva correspondiente como observador suscriptor y reemplaza los datos de la plantilla o vincula la función correspondiente. En este momento, cuando el observador suscriptor reciba cambios en las propiedades correspondientes, ejecutará la función de actualización correspondiente, actualizando así la vista.
Por lo tanto, a continuación, realizamos los siguientes cuatro pasos para lograr la vinculación bidireccional de datos:
Principio de respuesta profunda
Analizar el principio de implementación de Vue; enlace bidireccional Enlace MVVM
Principios básicos de los sistemas responsivos. Jet Research...
Solo quiero monitorear los cambios de un objeto ordinario al implementar MVVM en JavaScript.