Warum ist Vue asynchrones Rendering?

Grund: Es kann die Leistung verbessern. Wenn keine asynchronen Aktualisierungen verwendet werden, wird die aktuelle Komponente jedes Mal neu gerendert, wenn die Daten aktualisiert werden. Aus Leistungsgründen aktualisiert Vue die Ansicht daher nach dieser Datenaktualisierungsrunde asynchron, anstatt sie sofort zu aktualisieren, sobald Daten vorhanden sind aktualisieren.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

1. Das Prinzip und die Funktion von nextTick()

nextTick stellt sicher, dass das von uns betriebene DOM aktualisiert wird.

(1) Anwendungsszenario : Nachdem die Ansicht aktualisiert wurde, arbeiten Sie basierend auf der neuen Ansicht.

• Eine Operation, die nach den Datenänderungen ausgeführt wird, und diese Operation erfordert die Verwendung einer DOM-Struktur, die sich mit den Datenänderungen ändert , diese Operation muss in nextTick() eingefügt werden die Callback-Funktion.
nextTick()的回调函数中。
• 如果在created()钩子进行DOM操作，created()中dom还没有渲染，一定要放在nextTick()的回调函数中。
• Vue采用了数据驱动视图的思想，但是在一些情况下，仍然需要操作DOM。有时候，DOM1的数据发生了变化，而DOM2需要从DOM1中获取数据，那这时就会发现DOM2的视图并没有更新，这时就需要用到了nextTick了。

（2）原理：

• nextTick 的核心是利用了如 Promise 、MutationObserver、setImmediate、setTimeout的原生 JS 方法来模拟对应的微/宏任务的实现；
• 本质是为了利用 JS的这些异步回调任务队列来实现 Vue 框架中自己的异步回调队列；
• 本质是对JS执行原理事件循环的一种应用

nextTick 是典型的将底层JS执行原理应用到具体案例中的示例，引入异步更新队列机制的原因∶

如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染。所以为了性能考虑，Vue 会在本轮数据更新后，再去异步更新视图。而不是每当有数据更新，就立即更新视图。

• 为了在数据更新操作之后操作DOM，我们可以在数据变化之后立即使用nextTick(callback)；
• nextTick()将回调延迟到下一个事件循环开始时执行, 这样回调函数会在DOM更新完成后被调用，就可以拿到最新的DOM元素了。 

当你设置 vm.someData = 'new value'，DOM 并不会马上更新，而是在异步队列被清除，也就是下一个事件循环开始时执行更新才会进行必要的DOM更新。

(3) vue的降级策略

Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替，进行降级处理。降级处理的目的都是将flushCallbacksWenn Sie DOM-Operationen im „created()“-Hook ausführen,

der Dom nicht in „created()“ gerendert wurde,

muss in der Rückruffunktion von nextTick() platziert werden . Vue übernimmt die Idee der datengesteuerten Ansicht, aber in einigen Fällen muss das DOM noch manipuliert werden. Manchmal ändern sich die Daten von DOM1 und DOM2 muss Daten von DOM1 abrufen. Dann werden Sie feststellen, dass die Ansicht von DOM2 nicht aktualisiert wurde, und dann müssen Sie nextTick verwenden. (2) Prinzip:

nextTick Der Kern besteht darin, native JS-Methoden wie Promise, MutationObserver, setImmediate und setTimeout zu verwenden, um den entsprechenden Mikro-/ Makro-Implementierung von Aufgaben;

Die Essenz besteht darin,

diese asynchronen Callback-Aufgabenwarteschlangen von JS zu verwenden, um eine eigene asynchrone Callback-Warteschlange im Vue-Framework zu implementieren;

Die Essenz ist die Ausführung von JS Eine Anwendung des Prinzips der Ereignisschleife nextTick ist ein typisches Beispiel für die Anwendung des zugrunde liegenden JS-Ausführungsprinzips auf einen bestimmten Fall, Der Grund für die Einführung des Mechanismus der asynchronen Aktualisierungswarteschlange ∶

🎜🎜🎜Wenn 🎜Wenn keine asynchronen Aktualisierungen verwendet werden 🎜, dann 🎜 wird die aktuelle Komponente jedes Mal neu gerendert, wenn die Daten aktualisiert werden. 🎜Also🎜Aus Leistungsgründen aktualisiert Vue die Ansicht nach dieser Datenaktualisierungsrunde asynchron. 🎜Anstatt die Ansicht sofort zu aktualisieren, wenn Daten aktualisiert werden. 🎜🎜🎜🎜🎜🎜Um das DOM nach der Datenaktualisierungsoperation zu betreiben, können wir nextTick(callback) unmittelbar nach den Datenänderungen verwenden 🎜🎜🎜🎜🎜nextTick(); um den Rückruf zu verzögern. Es wird ausgeführt, wenn 🎜die nächste Ereignisschleife beginnt. Auf diese Weise wird die Rückruffunktion aufgerufen, nachdem die DOM-Aktualisierung abgeschlossen ist und das neueste DOM-Element erhalten werden kann. 🎜🎜🎜🎜Wenn Sie vm.someData = 'new value' festlegen, wird das DOM nicht sofort aktualisiert, sondern aktualisiert, wenn die asynchrone Warteschlange gelöscht wird, also wenn die nächste Ereignisschleife auftritt startet. 🎜Die notwendigen DOM-Updates werden durchgeführt. 🎜🎜🎜🎜🎜 (3) VUE -Downgrade -Strategie 🎜🎜🎜🎜🎜 🎜🎜🎜🎜🎜 🎜🎜🎜🎜🎜 🎜🎜🎜🎜🎜 🎜🎜🎜🎜🎜 🎜🎜🎜🎜🎜 🎜🎜🎜🎜🎜 🎜🎜🎜🎜🎜 🎜🎜🎜🎜🎜 🎜🎜🎜🎜🎜 🎜🎜🎜🎜🎜 🎜🎜🎜🎜🎜 🎜🎜🎜🎜🎜 - verwendet werden. 🎜setTimeout(fn, 0) 🎜ersetzt für die Downgrade-Verarbeitung. Der Zweck der Downgrade-Verarbeitung besteht darin, die Funktion flushCallbacks in die Mikrotask- oder Makrotask-Warteschlange zu stellen und auf die Ausführung in der nächsten Ereignisschleife zu warten🎜🎜🎜🎜Es ist möglich, dass die tatsächliche Leerung der Warteschlange in erfolgt Diese Ereignisschleife🎜 Was in einer Mikrotask aktualisiert wird, kann auch in der nächsten Ereignisschleife aktualisiert werden. Dies 🎜 hängt von der aktuellen Ausführungsumgebung des Codes ab 🎜 Wenn die aktuelle Ausführungsumgebung Versprechen unterstützt, verwendet nextTick tatsächlich Promise zur internen Ausführung und führt dann die Warteschlangenaktualisierung in der Mikrotask dieser Ereignisschleife aus. 🎜🎜🎜🎜🎜Der Grund dafür, Mikrotasks Priorität einzuräumen: 🎜Das Aktualisieren der Warteschlange🎜in 🎜Mikrotasks erfordert ein UI-Rendering weniger🎜 als das Aktualisieren 🎜in Makrotasks. 🎜🎜🎜🎜🎜2. Warum verwendet Vue asynchrones Rendering? 🎜🎜🎜🎜🎜vue ist ein Update auf Komponentenebene. Wenn sich die Daten in der Komponente ändern, wird die Komponente aktualisiert. Beispiel: this.a = 1, this.b=2 (gleicher Beobachter)🎜🎜

(1) Grund: Wenn keine asynchrone Aktualisierung verwendet, wird die aktuelle Komponente jedes Mal neu gerendert, wenn die Daten aktualisiert werden. AlsoAus Leistungsgründen aktualisiert Vue die Ansicht nach dieser Datenaktualisierungsrunde asynchron. Anstatt die Ansicht sofort zu aktualisieren, wenn Daten aktualisiert werden.

(2) Prozess:

• Vue führt Dom-Aktualisierungen asynchron durch. Sobald Datenänderungen beobachtet werden, öffnet Vue eine Warteschlange und fügt sie dann in die gleiche Ereignisschleife ein, die Datenänderungen beobachtet in diese Warteschlange geschoben.

• Wenn dieser Watcher mehrmals ausgelöst wird, wird er nur einmal in die Warteschlange verschoben. Dieses Pufferverhalten kann doppelte Daten effektiv entfernen und unnötige Berechnungen und DOM-Operationen vermeiden.

• Und in der nächsten Ereignisschleife löscht Vue die Warteschlange und führt die notwendigen DOM-Updates durch.

3) Quellcode-Analyse:

• Wenn sich die Daten ändern, benachrichtigen Sie den Beobachter über Benachrichtigung, um Aktualisierungsvorgänge durchzuführen.

• Rufen Sie nacheinander update() des Beobachters auf subs[i].update Die Ansicht wird nicht aktualisiert); in der Warteschlange wird der Watcher zur Warteschlange hinzugefügt (die Ansicht wird nicht aktualisiert);

Das obige ist der detaillierte Inhalt vonWarum ist Vue asynchrones Rendering?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!