Cómo utilizar el flujo de datos unidireccional angular
Detección de cambios
En Angular, los datos fluyen desde el nodo raíz en la parte superior hasta el último nodo hoja. Todo el flujo de datos es unidireccional, formando un árbol unidireccional.
Angular cree que todas las operaciones asincrónicas pueden hacer que el modelo cambie, y las fuentes de eventos que causan que el modelo de datos cambie incluyen:
Eventos: clic, movimiento del mouse, botón arriba. .. ....
Temporizadores: setInterval, setTimeout
XHR: Ajax (GET, POST...).
Angular ajusta la zona para interceptar y rastrear asíncrono, y una vez que se detecta el comportamiento asincrónico, Angular realizará la detección de cambios.
Dado que el flujo de datos es unidireccional y la fuente de datos del componente solo puede ser pasada por el componente principal, Angular detectará el componente de arriba a abajo y lo recorrerá lo más ampliamente posible. Y complételo después del componente principal. Después de la detección, continúe detectando los subcomponentes. En comparación con AngularJS, la dirección bidireccional y confusa del flujo de datos puede dar como resultado que la detección de cambios repetitivos se repita varias veces hasta que los datos sean estables, lo que puede causar problemas de rendimiento o que la apariencia y visualización de los datos estén en un estado inconsistente. es decir, el proceso de renderizado. La vista completa no refleja el estado real de los datos.
Representación de resultados
Cuando se detecta un cambio en el modelo de datos y es necesario volver a renderizar el componente, Angular ejecutará su función de generación de DOM, que generará la nueva versión de la vista del componente. Nueva estructura de datos DOM.
Angular evalúa las expresiones de la plantilla durante el renderizado y llama a los ganchos del ciclo de vida en todo el árbol de componentes.
Nota: la bandera verde se llama varias veces
En términos de llamadas de ciclo de vida (líneas de dirección verdes), ngAfterViewChecked marca la finalización de la salida de la vista de componentes y subcomponentes. Consulte el siguiente ejemplo:
importar {Component, AfterViewChecked} desde '@angular/core'
importar {Course} desde "./course"; p >@Component({
selector: 'raíz de aplicación',
plantilla: `
lt; p class="curso"gt;
lt;span class="descripción"gt;{{course.description}}lt;/spangt;
lt;/pgt;
`})< / p>
exportar clase AppComponent implementa AfterViewChecked {
curso: Curso = {
id: 1,
descripción: "Angular para principiantes"< / p>
};
ngAfterViewChecked() {
this.course.description = Math.random()
}
} El código anterior provocará un error durante el ciclo de detección de cambios de Angular.
El componente completó la generación de la estructura de datos DOM y también modificamos el estado de los datos en el método ngAfterViewChecked() del componente. Esto da como resultado que los datos no coincidan con el estado de la vista después de que se represente la vista.
Los datos fluyen desde las clases de componentes a las estructuras de datos DOM que representan esas clases de componentes, y el acto de generar estas estructuras de datos DOM no causa en sí ninguna modificación adicional de los datos. Sin embargo, cuando modificamos datos en el ciclo de vida de ngAfterView, las reglas de "flujo de datos unidireccional" de Angular prohíben actualizar la vista después de ensamblarla.
Esto significa que el proceso desde el modelo de datos hasta la vista es unidireccional y no pueden ocurrir cambios en el flujo de datos después de la vista.
Resumen
Del proceso de detección de cambios y el proceso de salida de renderizado, se puede concluir que:
El flujo de datos unidireccional se refiere a los datos de la aplicación desde el componente durante el proceso de escaneo de renderizado. La parte superior del árbol fluye hacia la parte inferior, a la estructura de datos DOM de salida generada por el proceso de renderizado.
Creo que después de leer este artículo dominas el método del caso. Para obtener más información interesante, ¡presta atención a otros artículos relacionados en Gxl.com!
Lectura recomendada:
Qué métodos puede utilizar vue-cli para acortar el tiempo de carga de la primera pantalla
vue reduce el número de solicitudes al servidor
Resumen de puntos de conocimiento comunes en el desarrollo de Vue.js