Mecanismo de operación JS
La ejecución de JS es de un solo subproceso y se basa en un bucle de eventos. El bucle de eventos se divide aproximadamente en los siguientes pasos:
(1) Todas las tareas de sincronización se ejecutan en el subproceso principal para formar una pila de contexto de ejecución.
(2) Además del hilo principal, también hay una "cola de tareas". Siempre que la tarea asíncrona tenga un resultado en ejecución,
se coloca un evento en la "cola de tareas".
(3) Una vez que se ejecutan todas las tareas sincrónicas en la "pila de ejecución", el sistema leerá la "cola de tareas" para ver qué eventos hay en ella. Esas
tareas asincrónicas correspondientes finalizan el estado de espera, ingresan a la pila de ejecución y comienzan a ejecutarse.
(4) El hilo principal sigue repitiendo el tercer paso anterior.
———————————————
Enlace original: https://blog.csdn.net/longtengg1/article/details/115576081
siguienteTick
Devolución de llamada después de la actualización DOM más reciente, ejecutada de forma asíncrona.
principio:
1. Ejecuta el callback que configuraste en el setTimeout cuyo parámetro es 0, para que se considere asíncrono, y espera a que se ejecute el código síncrono antes de ejecutarlo.
2. Vue no solo usa setTimeout para implementar nextTick, sino que juzgará si la promesa existe y seleccionará el tipo de tarea. Si existe la promesa, utilice microtareas.
efecto
- Vue es un marco para la representación asíncrona.
- Después de que los datos cambien, el DOM no se representará inmediatamente.
- $nextTick se activará después de la representación DOM para obtener el nodo DOM más reciente.
- Para múltiples representaciones asincrónicas consecutivas, $nextTick solo ejecutará el resultado después de la última representación. Evite cálculos innecesarios y manipulación de DOM.
Escenas
1. A veces es necesario agregar dinámicamente eventos a ciertos elementos dom en la página de acuerdo con los datos, lo que requiere configurarlos cuando se procesan los elementos dom, pero cuando se ejecutan las funciones creadas y montadas, el dom generalmente no se procesa, por lo que no se obtendrá, el problema de que no se puede agregar el evento, esta vez usaremos nextTick para solucionarlo
2. Al usar un complemento de terceros, desea volver a aplicar el complemento cuando cambien algunas dinámicas de dom generadas por vue, y este método también se usará. En este momento, debe volver a aplicar el complemento -in en la función de devolución de llamada del método $nextTick, por ejemplo: al aplicar el complemento de desplazamiento, mejor desplazamiento
3. Obtener el foco después de que cambien los datos
Reponer
Si no hay un mecanismo de actualización nextTick, num activará una actualización de vista cada vez que se actualice el valor. Con el mecanismo nextTick, solo necesita actualizarse una vez, por lo que nextTick es esencialmente una estrategia de optimización.
Escenario: si desea obtener la estructura DOM actualizada inmediatamente después de modificar los datos, puede usar Vue.$nextTick().
1. Coloque la función de devolución de llamada en devoluciones de llamada y espere la ejecución
2. Ponga la función de ejecución en una microtarea o una macrotarea
3. El ciclo de eventos llega a la microtarea o macrotarea, y la función de ejecución ejecuta las devoluciones de llamada en devoluciones de llamada a su vez.