El principio y los escenarios de aplicación de Vue.nextTick
La documentación oficial de nextTick explica:
Pregunta:
En la documentación de Vue, se explica que Vue es asíncrono cuando realiza actualizaciones de DOM. Para obtener una explicación de la asincronía, consulte este artículo del Sr. Yifeng Nguyen. Aquí están las partes clave:
Aquí hay un diagrama del hilo principal y la cola de tareas:
En pocas palabras, Vue no actualiza la vista inmediatamente después de modificar los datos; espera lo mismo. Se completan todos los cambios de datos en el bucle de eventos y luego la vista se actualiza de manera uniforme.
Ejemplo de base de conocimientos:
Ilustración:
Detalles del bucle:
Primer tick (el primer paso en la ilustración, es decir, "este ciclo de actualización"):
1. Primero modifique los datos, que es una tarea de sincronización. Todas las tareas sincronizadas para el mismo bucle de eventos se ejecutan en el hilo principal, formando una pila de ejecución que aún no involucra al DOM.
2.Vue abrirá una cola asincrónica y almacenará en buffer todos los cambios de datos que ocurran en el bucle de eventos. Si el mismo observador se activa varias veces, solo se enviará a la cola una vez.
El segundo tick (el segundo paso en la leyenda, el "próximo ciclo de actualización"):
Una vez que la tarea sincrónica completa su ejecución, comienza a ejecutarse en la cola del observador asincrónico Tarea, actualizar DOM. Vue intentará internamente utilizar los métodos nativos Promise.then y MessageChannel para colas asincrónicas. Si el entorno de ejecución no lo admite, se utilizará setTimeout(fn, 0) en su lugar.
El tercer tick (el tercer paso en el ejemplo):
La documentación dice que el próximo ciclo de actualización de DOM finaliza en este momento.
En este punto, el DOM modificado se recuperará a través de Vue.nextTick. También puedes usar setTimeout(fn, 0) para lograr lo mismo.
Breve resumen del bucle de eventos:
En resumen, async es un tick separado y no ocurre en el mismo tick que sync, razón por la cual el DOM no ocurre inmediatamente. para el cambio.
Ten en cuenta que durante las fases de creación y carga, si necesitas manipular los intentos renderizados, también debes utilizar el método nextTick.
Descripción del documento oficial:
Otros escenarios de aplicación son los siguientes en tres ejemplos:
Modificado a:
Original: /a/ 1190000012861862