Umfassende Analyse von nextTick in vue

Die folgende Spalte „Vue.js-Tutorial“ stellt Ihnen nextTick in Vue vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

vue ist ein sehr beliebtes Framework, das die Vorteile von Angular und React kombiniert, um ein leichtes und benutzerfreundliches MVVM-Framework mit bidirektionalen Datenbindungsfunktionen zu bilden. Ich benutze es lieber. Wenn wir Vue verwenden, verwenden wir häufig diese Methode. Ich glaube, Sie haben sie auch verwendet. Ein häufiges Szenario, das ich verwende, ist, dass ich nach dem Abrufen von Daten, wenn ich den nächsten Schritt oder andere Vorgänge für die neue Ansicht ausführen muss, feststelle, dass das DOM nicht abgerufen werden kann. Da der Zuweisungsvorgang nur die Änderung des Datenmodells abschließt und nicht die Ansichtsaktualisierung abschließt. Zu diesem Zeitpunkt müssen wir die in diesem Kapitel vorgestellten Funktionen verwenden.

Warum nextTick verwenden? Bitte sehen Sie sich den folgenden Code an und ändert seine Farbe in Rot, aber tatsächlich wird ein Fehler gemeldet. Bei der Ausführung dieses Satzes gibt es kein li unter ul, was bedeutet, dass der gerade ausgeführte Zuweisungsvorgang derzeit nicht dazu führt, dass die Ansichtsebene aktualisiert wird.

In diesem Fall stellt uns vue die Methode $nextTick zur Verfügung. Wenn wir in Zukunft mit der aktualisierten Ansicht arbeiten möchten, müssen wir nur die auszuführende Funktion an diese Methode übergeben. $nextTick, und vue wird dies tun Erledigen Sie die Arbeit für uns.

Interpretation des Quellcodes

Diese Funktion ist sehr einfach, beginnend mit Zeile 450 der Version vue2.2.6.

Verwendet diese Funktion zunächst einen einfachen Zinsmodus oder handelt es sich um eine Abschlussfunktion?

new Vue({
  el: '#app',
  data: {
    list: []
  },
  mounted: function () {
    this.get()
  },
  methods: {
    get: function () {
      this.$http.get('/api/article').then(function (res) {
        this.list = res.data.data.list
        // ref  list 引用了ul元素，我想把第一个li颜色变为红色
        this.$refs.list.getElementsByTagName('li')[0].style.color = 'red'
      })
    },
  }
})

Definiert zunächst einige Variablen für die spätere Verwendung.

var callbacks = [];   // 缓存函数的数组
var pending = false;  // 是否正在执行
var timerFunc;  // 保存着要执行的函数

Diese Funktion ist die tatsächlich in $ aufgerufene Funktion nextTick .

Als nächstes unterteilt Vue drei Situationen, um den Aufruf der oben genannten Funktion zu verzögern, da der Zweck von $nextTick darin besteht, die eingehende Funktion zu verzögern, bis der Dom aktualisiert wird, bevor er verwendet wird. Daher verwenden wir hier die js-Methode in eleganter absteigender Reihenfolge Punkt.

1. Verzögerter Aufruf von Promise.then

function nextTickHandler () {
  pending = false;
  //  拷贝出函数数组副本
  var copies = callbacks.slice(0);
  //  把函数数组清空
  callbacks.length = 0;
  // 依次执行函数
  for (var i = 0; i < copies.length; i++) {
    copies[i]();
  }
}

Wenn der Browser Promise unterstützt, verwenden Sie Promise.then, um den Funktionsaufruf zu verzögern , auch Das heißt, die Funktion wird zuletzt im Funktionsaufrufstapel aufgerufen. dadurch erreichen verzögerung.

2. MutationObserver überwacht Änderungen

if (typeof Promise !== 'undefined' && isNative(Promise)) {
  var p = Promise.resolve();
  var logError = function (err) { console.error(err); };
  timerFunc = function () {
    p.then(nextTickHandler).catch(logError);
    if (isIOS) { setTimeout(noop); }
  };
}

MutationObserver ist eine neue Funktion, die in h5 hinzugefügt wurde. Ihre Funktion besteht darin, Änderungen in Dom-Knoten zu überwachen und die Rückruffunktion auszuführen, nachdem alle Dom-Änderungen abgeschlossen sind.

Es gibt mehrere Änderungen, die speziell überwacht werden müssen.

childList: Änderungen in untergeordneten Elementen.

Attributes: Änderungen in Attributen.

• characterData: Änderungen im Knoteninhalt oder Knotentext in Knoten (einschließlich untergeordneter Knoten und untergeordneter Knoten von untergeordneten Knoten)

• Es ist ersichtlich, dass der obige Code einen Textknoten erstellt, um den Inhalt des Textknotens zu ändern und Änderungen auszulösen, da wir nach der Aktualisierung des Datenmodells wird dazu führen, dass der Dom-Knoten neu gerendert wird.
• Also haben wir einen solchen Änderungs-Listener hinzugefügt, der den Listener mit einer Änderung in einem Textknoten auslöst, und nachdem der gesamte Dom gerendert wurde, führen wir die Funktion aus, um unseren Verzögerungseffekt zu erzielen. 3. SetTimeout-Verzögerer Die Funktion wird ausgeführt. Damit ist die Verzögerungsfunktion abgeschlossen.

• Abschlussfunktion

else if (typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {

  var counter = 1;
  var observer = new MutationObserver(nextTickHandler);
  var textNode = document.createTextNode(String(counter));
  observer.observe(textNode, {
    characterData: true
  });
  timerFunc = function () {
    counter = (counter + 1) % 2;
    textNode.data = String(counter);
  };
}

Diese Rückgabefunktion ist die Abschlussfunktion, die wir tatsächlich verwenden. Jedes Mal, wenn wir eine Funktion hinzufügen, legen wir das Callback-Funktionsarray auf den Stapel. Überwachen Sie dann, ob sie gerade ausgeführt wird, und führen Sie die Funktion andernfalls aus. Das ist leicht zu verstehen. Das nächste ist Versprechen.

else {
    timerFunc = function () {
      setTimeout(nextTickHandler, 0);
    };
  }

Die zweite Art, den obigen Code zu schreiben, ist bei uns nicht üblich. Sie ruft die Funktion $nextTick direkt auf und schreibt den Code dann im Promise-Format, was jedoch nicht von Vue verarbeitet werden kann es intern. 🔜

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmierkurse! !

Das obige ist der detaillierte Inhalt vonUmfassende Analyse von nextTick in vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!