Analyse des Prinzips von Vue nextTick

Freunde, die Vue verwendet haben, wissen, dass nextTick in Vue das aktualisierte DOM abrufen kann. Heute werde ich erklären, was nextTick macht.

Bevor wir beginnen, müssen wir ein Konzept kennen, nämlich Event Loop.

Ereignisschleife

Event Loop wird als Ereignisschleife übersetzt. Eine Event Loop umfasst eine oder mehrere Task-Warteschlangen. Der fortlaufende Thread nimmt den frühesten Task aus der Warteschlange zur Ausführung. Der genommene Task wird als Makrotask bezeichnet. Jeder Makrotask hat eine Taskquelle. Nachdem jeder Makrotask verarbeitet wurde, wird der nächste früheste Makrotask aus der Warteschlange genommen und erneut ausgeführt.

Aufgabenquelle:

```
    1. Skript
    2. Ereignisse 3. Dom-Interaktion 4. I/O
    5. UI-Rendering
    6. setTimeout
    7. Intervall festlegen
    8. requestAnimationFrame
    .....
```

Das heißt, wenn die oben genannten Situationen auftreten, wird eine Makrotask generiert und in die Warteschlange gestellt.

miscroTask (Mikroaufgabe)

Nach der Ausführung jeder Makrotask prüft der Hauptthread, ob die Mikrotask unter der Makrotask leer ist. Wenn sie nicht leer ist, wird sie in chronologischer Reihenfolge von früh bis spät herausgenommen. Wenn unterwegs eine neue Mikrotask angetroffen wird, wird die Mikrotask weiterhin in die Mikrotask-Warteschlange geschoben.

UI-Render (wichtigste Punkte)

Wenn die MiscroTask-Warteschlange gelöscht wird, führt der Hauptthread UI Render aus, d. h., er rendert die Schnittstelle. Allerdings rendert der Browser die Schnittstelle nicht unbedingt jedes Mal unter der UI-Render-Aufgabe. Es hängt von der Situation ab. Heutzutage rendern Mainstream-Browser im Allgemeinen mit einer Bildwiederholfrequenz von 60 Hz, d. h. 16,7 ms (keine genaue Schätzung). Eine MacroTask dauert normalerweise weniger als 16,7 ms, sodass der Browser jedes Mal der Situation entsprechend rendert.

Fassen Sie den nächsten Zyklus zusammen

1. Nehmen Sie die am frühesten hinzugefügte Aufgabe aus der MacroTask-Warteschlange heraus
2. Starten Sie die Ausführung der Aufgabe. Wenn während des Vorgangs eine neue Makroaufgabe gefunden wird, wird sie am Ende der Makroaufgabenwarteschlange hinzugefügt.
3. Nach der Ausführung der Makrotask sucht die Ereignisschleife nach der Mikrotask-Warteschlange
4. Wenn unterwegs eine neue Mikrotask angetroffen wird, wird sie ebenfalls am Ende der Mikrotask-Warteschlange unter der Makrotask platziert.
5. Nach der Ausführung von microTask wird UI Render macroTask ausgeführt
6. Der Browser entscheidet je nach aktueller Situation, ob das DOM aktualisiert werden soll, normalerweise mit einer Frequenz von 60 Hz
7. An dieser Stelle endet eine Ereignisschleife

nächstesTick

Wir beginnen mit der Analyse von nextTick

Gemäß der obigen Abbildung können wir mehrere Möglichkeiten erkennen, nextTick zu schreiben:

    1. dies.$nextTick(cb)
    2. dies.$nextTick().then(cb)

Alle cb werden in das Callback-Array eingefügt und warten auf einen einmaligen Aufruf. In der obigen Abbildung können wir sehen, dass der Callback hauptsächlich von der Funktion timerFunc aufgerufen wird. Konzentrieren wir uns im Folgenden auf diese Funktion. Schauen wir uns zunächst den Quellcode an

Wir können sehen, dass timerFunc in verschiedenen Situationen unterschiedliche Zuweisungen hat

Zunächst wird ermittelt, ob der Browser das Promise-Attribut unterstützt. Wenn dies der Fall ist, wird Promise timerFunc zugewiesen. Dabei gibt es ein kleines Problem. Unter iOS ist zwar ein Promise-Objekt vorhanden und wird in die MicroTask-Warteschlange verschoben, die Warteschlange wird jedoch nicht aktualisiert. Zu diesem Zeitpunkt müssen Sie eine MacroTask hinzufügen, um eine Aktualisierung der MicroTask-Warteschlange zu erzwingen.

MutationObserver, ich glaube, viele Leute kennen diese API nicht. Dies ist eine API, die DOM-Änderungen überwachen kann und zu microTask gehört, mit einer niedrigeren Priorität als Promise. Nachdem Sie einen neuen Textknoten erstellt haben, ändern Sie seinen Textknoten manuell, um die microTask auszulösen.

Hier gibt es ein kleines Problem:

Wenn der Textknoten erfolgreich gerendert wurde, bedeutet das, dass auch andere DOM-Renderings erfolgreich sind?

Dies ist eine alternative Lösung, hauptsächlich weil es sich um eine Mikrotask handelt und sie daher verwendet wird, nicht weil sie den DOM überwacht.

Wenn alle Mikrotasks fehlschlagen, ist die nächstbeste Option, setImmediate zu wählen. Dabei handelt es sich um eine API, die möglicherweise nur in den höherwertigen IE- und Edge-Browsern verfügbar ist. Sie wird hauptsächlich bei der Berechnung großer Datenmengen verwendet.

Zum Schluss setTimeout

Haben Sie nach der Lektüre noch Zweifel?

Der obige Code zeigt nicht an, dass nextTick nach dem Abhören von DOM-Updates ausgeführt wird? Was??? In diesem Moment war mein Kopf leer.

Dann ist das Nächste das Wichtigste

Der DOM-Baum wird in Echtzeit aktualisiert. Der DOM-Baum wird in Echtzeit aktualisiert. Der DOM-Baum wird in Echtzeit aktualisiert. Ich wiederhole das dreimal. Das bedeutet, dass Sie DOM-Updates nicht überwachen müssen. Ihre Operationen am DOM können Feedback in Echtzeit erhalten. Die vorherige Codezeile bedient den DOM und die nächste Zeile kann es abrufen.

Dann werden einige Leute verwirrt sein, was genau macht nextTick?

Die Rolle von nextTick besteht darin, den Collection Watcher nacheinander aus der Warteschlange zu nehmen und die Daten zu ändern, um den DOM gleichzeitig zu rendern. Wir wissen, dass der Betrieb des DOM teuer ist. Wenn ein Browser eine Webseite öffnet, startet er einen Prozess, der aus Threads besteht.

1. GUI-Rendering-Thread
2. js-Engine-Thread (Haupt-Thread)
3. EventLoop-Trainingsthread
4. Andere Threads, wie Netzwerk

Threadübergreifende Operationen sind teuer, daher kann das Rendern des DOM in einem Durchgang die Leistung effektiv optimieren! !

Zusammenfassen

NextTick wird nicht zum Überwachen von DOM-Änderungen verwendet, da DOM-Änderungen in Echtzeit abgerufen werden können. Seine Funktion besteht darin, Daten einmal zu ändern und DOM zu rendern.

Oben finden Sie eine detaillierte Analyse des Prinzips von Vue nextTick. Weitere Informationen zum Prinzip von Vue nextTick finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!