En pocas palabras, es detección de cambios.
Extraer (notificar cambios de estado y luego comparar violentamente qué nodos deben volver a renderizarse): verificación sucia angular, reaccionar virtual dom.
Empujar (sepa claramente qué estado ha cambiado, detallado, notifique al nodo dependiente vinculado a este estado para que se actualice): Vue
Sin embargo, cuanto más fina es la granularidad, cada estado es vinculado a Cuantas más dependencias haya, mayor será la sobrecarga de seguimiento. El DOM virtual se introdujo desde Vue2.0 y el enlace se basa en el nivel de componente en lugar del nivel de nodo. Los cambios de estado se notifican al componente y el DOM virtual se utiliza para comparaciones internas dentro del componente.
Seguimiento de los cambios de objetos para definir propiedades y servidores proxy
Dependencias de la colección
Cuando los datos cambian, es necesario notificar a los lugares que los utilizan. Así que recopile dependencias en captadores y active dependencias en establecedores.
Para reducir el acoplamiento, la clase Dep está encapsulada para gestionar las dependencias.
¿Cuál es exactamente la dependencia de la colección window.target? La dependencia es donde se utilizan los datos, que pueden ser una plantilla o una tabla escrita por el usuario. Requiere abstraer una clase para manejar diversas situaciones. En la fase de recopilación de dependencias, solo se recopilan y notifican instancias de esta clase, y luego es responsable de notificar a otros lugares: Watcher.
Detectar recursivamente todas las claves
Encapsule una clase Observer para convertir todas las propiedades (incluidas las subpropiedades) de los datos en formularios getter/setter.
Getter/setter solo puede rastrear si una propiedad se modifica, pero no puede rastrear si una propiedad se agrega o elimina, por lo que hay dos API, vm. borrar. Antes de ES6.
Dibujo
La detección de cambios en objetos se implementa mediante captadores/definidores, pero si la matriz se cambia mediante métodos en el prototipo de matriz, no se puede detectar. Al utilizar configuradores para el seguimiento, si se puede notificar al usuario cuando se cambia la matriz utilizando métodos en el prototipo de la matriz, se puede detectar el cambio.
Podemos usar un interceptor arrayMethods para anular Array.prototype, enviar una notificación de cambio en el interceptor y luego ejecutar la función original. Siete métodos para cambiar el contenido de la matriz: ['push', 'pop', 'shift', 'unshaft', 'splice', 'sort', 'reverse']
Los métodos de matriz interceptora no pueden ser Se anula directamente Array.prototype, lo que contaminará la matriz global. Nuestra operación de interceptación solo necesita ser efectiva para aquellos datos en los que se han detectado cambios, lo que significa que el interceptor solo anula el prototipo de la matriz de respuesta. Se requiere que los observadores conviertan los datos en respuestas.
ES6 reemplazó proto con Object.getPropertyOf y object.setpropertyof.
El captador se activará cada vez que se acceda al valor de la matriz. Entonces Array recopila dependencias en captadores y las activa en interceptores.
La lista de dependencias se almacena en Observer, porque tanto el captador como el interceptor pueden acceder a la instancia de Observer.
Acceso en getter:
Acceso en interceptor:
De esta manera, puede acceder a dep en la instancia de Observer a través del atributo ob del valor de la matriz, y Las dependencias se notifican cuando se llama a un método que cambia el contenido de la matriz. Al mismo tiempo, ob se utiliza en la función ob de la que depende la colección para determinar si el observador ha convertido los datos en una respuesta.
Detectar cambios en elementos del array
Detectar cambios en nuevos elementos
Los métodos para agregar elementos del array son: push, unshift y splice. Puede eliminar los elementos agregados y hacerlos receptivos utilizando el método observeArray.
La detección de cambios de la matriz se implementa interceptando los métodos en el prototipo, por lo que es imposible asignar directamente un valor a un elemento de la matriz o cambiar la matriz estableciendo la longitud. Entonces puedes usar api o método en su lugar.
ExpOrFn: a.b.c o función
Opciones: {profunda, inmediata}
Se utiliza para observar cambios en expresiones o funciones calculadas en instancias de Vue. Cuando se llama a la función de devolución de llamada, se obtendrán newValue y oldValue de los parámetros. Devuelve una función no observable para dejar de activar la devolución de llamada.
profundo: los cambios en el valor interno del objeto de vigilancia activarán una devolución de llamada.
Inmediato: activa la devolución de llamada inmediatamente con el valor actual de la expresión.
Todos los atributos que comienzan con vm. $ están todos escritos en Vue.prototype.
Principios
El desmontaje primero debe registrar los departamentos que ya contiene en el observador. Cuando no está siendo monitoreado, recorre en iteración su propia lista de registros y se elimina de la lista de dependencias del DEP.
Principio de implementación en profundidad: además de activar la dependencia de recopilación de los datos monitoreados, todos sus subvalores deben activarse una vez. Cuando los datos secundarios cambian, se puede notificar al observador actual.
Establecer atributos en la etiqueta. Si el objetivo responde, las propiedades creadas también responden, lo que desencadena una actualización de la vista. Se utiliza principalmente para evitar la limitación de que Vue no pueda detectar atributos recién agregados.
Se utiliza para eliminar atributos clave en el objeto de destino. Si el objeto es pasivo, debe asegurarse de que la eliminación active un intento de actualización. Principalmente para evitar la limitación de que los cambios no se pueden detectar usando eliminar directamente.