Bringt Sie zu einem tieferen Verständnis von Vue.$nextTick (eine kurze Analyse des Prinzips)

Dieser Artikel wird das reine Wissen von Vue mit Ihnen teilen, Vue.nextTick vorstellen, das Sie nicht kennen, und über das Prinzip von Vue.$nextTick sprechen. Ich hoffe, es wird für alle hilfreich sein!

... Ich habe diese Daten geändert, aber wenn ich sie erhalte, warum ist es der letzte Wert (ich bin faul, daher werde ich kein konkretes Beispiel nennen?) „Ich verstehe nicht, mein DOM wird asynchron aktualisiert!“

Einfach ausgedrückt ändert die Reaktionsfähigkeit von Vue nicht nur das DOM unmittelbar nach den Datenänderungen, sondern ändert das DOM auch gemäß einer bestimmten Aktualisierungsstrategie. Dies hat den Vorteil, dass einige unnötige Vorgänge im DOM vermieden und die Renderleistung verbessert werden können. [Verwandte Empfehlungen:

vuejs-Video-Tutorial

,

Web-Front-End-Entwicklung]

Dies wird in der offiziellen Vue-Dokumentation erklärt:

Vielleicht ist Ihnen nicht aufgefallen, dass Vue DOM-Updates asynchron durchführt. Solange Datenänderungen beobachtet werden, öffnet Vue eine Warteschlange und puffert alle Datenänderungen, die in derselben Ereignisschleife auftreten. Wenn derselbe Watcher mehrmals ausgelöst wird, wird er nur einmal in die Warteschlange verschoben. Diese Deduplizierung der Daten während der Pufferung ist sehr wichtig, um unnötige Berechnungen und DOM-Operationen zu vermeiden. Beim nächsten „Tick“ der Ereignisschleife leert Vue dann die Warteschlange und führt die eigentliche (deduplizierte) Arbeit aus.

Um es ganz klar auszudrücken: Dies hängt tatsächlich eng mit der Ereignisschleife in JS zusammen, das heißt, Vue kann nicht jede Datenänderung rendern. Diese Änderungen werden zunächst in eine asynchrone Warteschlange gestellt und gleichzeitig dedupliziert Wenn Sie diese Daten beispielsweise dreimal ändern, wird nur die letzte gespeichert. Diese Änderungen können in Form einer Warteschlange gespeichert werden. Nun stellt sich die Frage: Zu welchem ​​Zeitpunkt in der Ereignisschleife ändert Vue das DOM? Vue hat zwei Optionen: Eine besteht darin, das DOM am Ende dieser Ereignisschleife zu aktualisieren, und die andere darin, die DOM-Aktualisierung in die nächste Runde der Ereignisschleife zu platzieren. zZu diesem Zeitpunkt klopfte You Yuxi auf ihre Brust und sagte: „Ich habe beide Methoden!“ Da die endgültige Ausführung dieser Runde der Ereignisschleife jedoch viel schneller sein wird als die nächste Runde der Ereignisschleife, gibt Vue der ersten den Vorrang. , der zweite Mechanismus wird nur ausgelöst, wenn die Umgebung ihn nicht unterstützt. (Der Link, der mit ?? beginnt, lässt Sie die Ereignisschleife verstehen)

Obwohl die Leistung stark verbessert wurde, treten zu diesem Zeitpunkt Probleme auf. Wir alle wissen, dass in einer Runde der Ereignisschleife nach der Ausführung des Codes in Wenn der synchrone Ausführungsstapel abgeschlossen ist und der Inhalt der asynchronen Warteschlange ausgeführt wird, ist unser Vorgang zum Abrufen des DOM synchron! ! Würde das nicht bedeuten, dass die Daten, obwohl ich sie geändert habe, asynchron aktualisiert werden, und wenn ich sie erhalte, keine Zeit zum Ändern hatte, sodass das Problem am Anfang des Artikels auftritt?

Das. . . Ich muss das wirklich tun, also was soll ich tun? ?

Das spielt keine Rolle, Youda hat uns sehr sorgfältig mit Vue.$nextTick()

Vue.$nextTick()

versorgt Tatsächlich kann ein Satz $nextTick klar erklären: Die Operation, die Sie in $nextTick eingeben, wird nicht sofort ausgeführt, sondern wartet auf die Datenaktualisierung und die DOM-Aktualisierung Führen Sie es später aus, damit wir definitiv das Neueste erhalten.

Genauer gesagt verzögert die Methode $nextTick den Rückruf bis zum nächsten DOM-Aktualisierungszyklus. (Wenn Sie diesen Satz nicht verstehen, können Sie [Hundekopf] oben lesen)

Wir alle verstehen die Bedeutung, also wie erfüllt $nextTick diese magische Funktion? Der Kern ist wie folgt:

Vue.$nextTick()

Vue.$nextTick()

其实一句话就可以把$nextTick这个东西讲明白：就是你放在$nextTick 当中的操作不会立即执行，而是等数据更新、DOM更新完成之后再执行，这样我们拿到的肯定就是最新的了。

再准确一点来讲就是$nextTick方法将回调延迟到下次DOM更新循环之后执行。（看不懂这句人话的，可以看上面[狗头]）

意思我们都懂了，那$nextTick是怎样完成这个神奇的功能的呢？ 核心如下：

Vue在内部对异步队列尝试使用原生的Promise.then、MutationObserver和setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0)代替。

仔细地看这句话，你就可以发现这不就是利用 JavaScript 的这些异步回调任务队列，来实现 Vue 框架中自己的异步回调队列。这其实就是一个典型的将底层 JavaScript 执行原理应用到具体案例中的示例。

我在这里稍微总结一下：就是$nextTickVue versucht intern, natives Promise.then, MutationObserver und setImmediate zu verwenden Für asynchrone Warteschlangen > wird stattdessen setTimeout(fn, 0) verwendet, wenn die Ausführungsumgebung dies nicht unterstützt.

Schauen Sie sich diesen Satz genau an und Sie werden feststellen, dass es sich dabei nicht nur um die Verwendung dieser asynchronen Callback-Aufgabenwarteschlangen von JavaScript handelt, um Ihre eigene asynchrone Callback-Warteschlange im Vue-Framework zu implementieren. Dies ist tatsächlich ein typisches Beispiel für die Anwendung der zugrunde liegenden JavaScript-Ausführungsprinzipien auf einen bestimmten Fall. 🎜🎜Lassen Sie es mich hier ein wenig zusammenfassen: $nextTick fügt die Callback-Funktion in eine Mikroaufgabe oder eine Makroaufgabe ein, um ihre Ausführungsreihenfolge zu verzögern (ist die Zusammenfassung zu faul?) 🎜🎜Die Wichtig ist, die Bedeutung der drei Parameter im Quellcode zu verstehen: 🎜

• callback: Die Operation, die wir ausführen möchten, kann in dieser Funktion platziert werden. Wir werden die Callback-Funktion in eine asynchrone Warteschlange stellen, bevor $nextTick einmal ausgeführt wird um festzustellen, ob es das erste Mal ist, einer Ereignisschleife beizutreten. Die Warteschlangenmontage für die asynchrone Ausführung wird nur beim ersten Hinzufügen ausgelöst
$nextTick就会把回调函数放到一个异步队列当中；
• pending：标识，用以判断在某个事件循环中是否为第一次加入，第一次加入的时候才触发异步执行的队列挂载
• timerFunc：用来触发执行回调函数，也就是Promise.then或MutationObserver或setImmediate 或setTimeout的过程

理解之后，在看整个$nextTick里面的执行过程，其实就是把一个个$nextTick中的回调函数压入到callback队列当中，然后根据事件的性质等待执行，轮到它执行的时候，就执行一下，然后去掉callback队列中相应的事件。

使用

说了这么多，怎么用它呢？ 很简单很简单

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

使用场景

• created中获取DOM的操作需要使用它

• 就是我们上面的例子，你如果想要获取最新值，就用它

• 还有一些第三方插件使用过程中，使用到的情况，具体问题具体分析

参考 前端进阶面试题详细解答

补充

之前我一直搞不懂一个的问题，$nextTick既然把它传入的方法变成微任务了，那它和其它微任务的执行顺序是怎样的呢？

这简单来说就是谁先挂载Promise对象的问题，在调用$nextTick方法时就会将其闭包内部维护的执行队列挂载到Promise对象，在数据更新时Vue内部首先就会执行$nextTick方法，之后便将执行队列挂载到了Promise对象上，其实在明白Js的Event Loop模型后，将数据更新也看做一个$nextTick方法的调用，并且明白$nextTick方法会一次性执行所有推入的回调，就可以明白执行顺序的问题了

还有$nextTick和nextTick区别就是nextTick多了一个context参数，用来指定上下文。但两个的本质是一样的，$nextTick是实例方法，nextTick是类的静态方法而已；实例方法的一个好处就是，自动给你绑定为调用实例的thistimerFunc: wird zum Auslösen der Ausführungsrückruffunktion verwendet, d. h. Der Prozess von Promise.then oder MutationObserver oder setImmediate oder setTimeout

Nach dem Verständnis, Schauen Sie sich an: Der gesamte Ausführungsprozess in $nextTick besteht tatsächlich darin, die Rückruffunktionen in $nextTick in die Rückrufwarteschlange zu verschieben und dann entsprechend der Art des Ereignisses auf die Ausführung zu warten . Wenn es ausgeführt wird, wird es ausgeführt und dann wird das entsprechende Ereignis in der Rückrufwarteschlange entfernt.

Verwendung

Nach so viel gesagt, wie benutzt man es? Sehr einfachrrreee

Nutzungsszenarien

erstellt Das müssen Sie Verwenden Sie es, um das DOM zu erhalten🎜🎜Es ist unser Beispiel oben. Wenn Sie den neuesten Wert erhalten möchten, verwenden Sie es🎜🎜🎜Es werden auch einige Plug-Ins von Drittanbietern verwendet während der Nutzungssituation, spezifische Analyse spezifischer Probleme🎜

🎜ReferenzDetaillierte Antworten auf fortgeschrittene Front-End-Interviewfragen🎜🎜

Ergänzung

🎜Ich konnte noch nie eine Frage beantworten, da $nextTick seine eingehende Methode in eine Mikrotask umgewandelt hat. In welcher Reihenfolge werden diese und andere Mikrotasks ausgeführt? 🎜🎜Dies hängt einfach davon ab, wer das Promise-Objekt zuerst einbindet. Wenn die Methode $nextTick aufgerufen wird, wird die in ihrem Abschluss verwaltete Ausführungswarteschlange in Promise-Objekt: Wenn die Daten aktualisiert werden, führt Vue zunächst die Methode $nextTick intern aus und stellt dann die Ausführungswarteschlange in Promise -Objekt, tatsächlich wird die Datenaktualisierung nach dem Verständnis des <code>Event Loop-Modells von Js auch als Aufruf von $nextTickbetrachtet > Methode und verstehen, dass die $nextTick-Methode alle Push-Rückrufe auf einmal ausführt, können Sie das Problem der Ausführungsreihenfolge verstehen🎜🎜Es gibt auch $nextTick und nextTickDer Unterschied besteht darin, dass nextTick einen zusätzlichen Kontextparameter hat, um den Kontext anzugeben. Aber das Wesentliche bei beiden ist das Gleiche. $nextTick ist eine Instanzmethode und nextTick ist nur eine statische Methode der Klasse es ist automatisch an Sie gebunden. Rufen Sie einfach this der Instanz auf. 🎜🎜 (Teilen von Lernvideos: 🎜Vuejs-Einführungs-Tutorial🎜, 🎜Grundlegendes Programmiervideo🎜)🎜

Das obige ist der detaillierte Inhalt vonBringt Sie zu einem tieferen Verständnis von Vue.$nextTick (eine kurze Analyse des Prinzips). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!