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.

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

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'
      })
    },
  }
})

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

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]();
  }
}

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); }
  };
}

• 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);
  };
}

Nach dem Login kopieren

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

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!