Welche Funktion hat nextTick in Vue? Einfache Implementierung von nextTick

In diesem Artikel erfahren Sie, welche Funktion nextTick in Vue hat. Wie erreichen? , hat einen bestimmten Referenzwert, Freunde in Not können sich darauf beziehen, ich hoffe, es wird Ihnen hilfreich sein.

nextTick ist eine Kernfunktion von Vue und nextTick wird häufig in der internen Implementierung von Vue verwendet. Viele Anfänger verstehen jedoch weder das Prinzip von nextTick noch die Funktion von nextTick.

Also schauen wir uns zunächst an, was nextTick ist.

nextTick-Funktion

Sehen Sie sich die Beschreibung der offiziellen Dokumentation an:

Führen Sie einen verzögerten Rückruf aus, nachdem der nächste DOM-Aktualisierungszyklus endet. Verwenden Sie diese Methode unmittelbar nach dem Ändern von Daten, um das aktualisierte DOM zu erhalten.

Schauen Sie sich noch einmal das offizielle Beispiel an:

// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })

Neu seit 2.1.0: Wenn kein Rückruf bereitgestellt wird und in einer Umgebung, die Promise unterstützt, wird ein Promise zurückgegeben. Bitte beachten Sie, dass Vue keine Promise-Polyfills enthält. Wenn Ihr Zielbrowser Promise also nicht nativ unterstützt (IE: Warum sehen Sie mich an), müssen Sie die Polyfills selbst bereitstellen.

Wie Sie sehen können, besteht die Hauptfunktion von nextTick darin, die Daten zu ändern und die Callback-Funktion auf die Dom-Aktualisierung einwirken zu lassen. Viele Leute sind verwirrt, wenn sie das sehen. Warum muss ich die Rückruffunktion ausführen, nachdem ich die Daten geändert habe?

Dies hängt mit Event Loop in JS zusammen. Es gibt unzählige Online-Tutorials, daher werde ich hier nicht auf Details eingehen. Es wird empfohlen, dass Sie die Ereignisschleife verstehen, bevor Sie mit dem Lesen dieses Artikels fortfahren.

Ein praktisches Beispiel:

Wir haben einen Tisch mit einem Pager und bei jedem Umblättern muss das erste Element ausgewählt werden. Unter normalen Umständen möchten wir auf den Seitenwender klicken, Daten aus dem Hintergrund abrufen, die Tabellendaten aktualisieren und die Tabellen-API manipulieren, um das erste Element auszuwählen.

Sie werden jedoch feststellen, dass die Tabellendaten aktualisiert werden, das erste Element jedoch nicht ausgewählt ist. Denn wenn Sie das erste Element auswählen, werden zwar die Daten aktualisiert, das DOM wird jedoch nicht aktualisiert. An diesem Punkt können Sie nextTick verwenden, um die Auswahl des ersten Elements in der Tabelle zu manipulieren, nachdem das DOM aktualisiert wurde.

Was genau macht nextTick also, um die Callback-Funktion auszuführen, nachdem das DOM aktualisiert wurde?

Quellcode-Analyse

Der Quellcode von nextTick befindet sich in src/core/util/next-tick.js, mit insgesamt 118 Zeilen, und eignet sich sehr gut für Studierende, die den Quellcode zum ersten Mal lesen.

Der NextTick-Quellcode ist hauptsächlich in zwei Teile unterteilt:

1. Führen Sie die Rückrufwarteschlange je nach Fähigkeitserkennung auf unterschiedliche Weise aus.

Fähigkeitserkennung

Dieser Teil ist eigentlich sehr einfach. Wie wir alle wissen, ist die Ereignisschleife in Makroaufgabe und Mikroaufgabe unterteilt, unabhängig davon, ob eine Makroaufgabe oder eine Mikroaufgabe ausgeführt wird nach Abschluss und in beiden Fällen Führen Sie das UI-Rendering zwischen den Ticks durch.

Makroaufgaben nehmen jedoch mehr Zeit in Anspruch als Mikroaufgaben. Wenn der Browser dies unterstützt, sollten Sie daher zuerst Mikroaufgaben verwenden. Wenn der Browser keine Mikrotasks unterstützt, verwenden Sie Makrotasks. Die Effizienz verschiedener Makrotasks ist jedoch unterschiedlich und Sie müssen je nach Browserunterstützung unterschiedliche Makrotasks verwenden.

nextTick folgt dieser Idee, wenn es um Fähigkeitstests geht.

// Determine (macro) task defer implementation.
// Technically setImmediate should be the ideal choice, but it's only available
// in IE. The only polyfill that consistently queues the callback after all DOM
// events triggered in the same loop is by using MessageChannel.
/* istanbul ignore if */
// 如果浏览器不支持Promise，使用宏任务来执行nextTick回调函数队列
// 能力检测，测试浏览器是否支持原生的setImmediate（setImmediate只在IE中有效）
if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  // 如果支持，宏任务（ macro task）使用setImmediate
  macroTimerFunc = () => {
    setImmediate(flushCallbacks)
  }
  // 同上
} else if (typeof MessageChannel !== 'undefined' && (
  isNative(MessageChannel) ||
  // PhantomJS
  MessageChannel.toString() === '[object MessageChannelConstructor]'
)) {
  const channel = new MessageChannel()
  const port = channel.port2
  channel.port1.onmessage = flushCallbacks
  macroTimerFunc = () => {
    port.postMessage(1)
  }
} else {
  /* istanbul ignore next */
  // 都不支持的情况下，使用setTimeout
  macroTimerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

Überprüfen Sie zunächst, ob der Browser setImmediate unterstützt. Wenn nicht, können Sie nur setTimeout verwenden, das am wenigsten effizient, aber am kompatibelsten ist.

Überprüfen Sie anschließend, ob der Browser Promise unterstützt, um die Rückruffunktionswarteschlange auszuführen. Schließlich sind Mikrotasks schneller als Makrotasks. Wenn dies nicht unterstützt wird, können Sie zum Ausführen der Rückruffunktionswarteschlange nur Makroaufgaben verwenden.

Führen Sie die Rückruffunktionswarteschlange aus

Der Code zum Ausführen der Rückruffunktionswarteschlange befindet sich nur am Anfang und am Ende

// 回调函数队列
const callbacks = []
// 异步锁
let pending = false

// 执行回调函数
function flushCallbacks () {
  // 重置异步锁
  pending = false
  // 防止出现nextTick中包含nextTick时出现问题，在执行回调函数队列前，提前复制备份，清空回调函数队列
  const copies = callbacks.slice(0)
  callbacks.length = 0
  // 执行回调函数队列
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

...

// 我们调用的nextTick函数
export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
  // 将回调函数推入回调队列
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, &#39;nextTick&#39;)
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  // 如果异步锁未锁上，锁上异步锁，调用异步函数，准备等同步函数执行完后，就开始执行回调函数队列
  if (!pending) {
    pending = true
    if (useMacroTask) {
      macroTimerFunc()
    } else {
      microTimerFunc()
    }
  }
  // $flow-disable-line
  // 2.1.0新增，如果没有提供回调，并且支持Promise，返回一个Promise
  if (!cb && typeof Promise !== &#39;undefined&#39;) {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

Der Gesamtprozess besteht darin, die Rückruffunktion zu empfangen und Schieben Sie die Rückruffunktion in die Mitte der Rückruffunktionswarteschlange.

Führen Sie gleichzeitig beim Empfang der ersten Rückruffunktion die entsprechende asynchrone Methode im Fähigkeitstest aus (die Rückruffunktionswarteschlange wird in der asynchronen Methode aufgerufen).

Wie kann sichergestellt werden, dass die asynchrone Methode nur ausgeführt wird, wenn die erste Rückruffunktion empfangen wird?

Der nextTick-Quellcode verwendet das Konzept einer asynchronen Sperre, d. h. beim Empfang der ersten Rückruffunktion wird die Sperre zunächst geschlossen und die asynchrone Methode ausgeführt. Zu diesem Zeitpunkt wartet der Browser auf die Ausführung des synchronen Codes, bevor er den asynchronen Code ausführt.

Eine Analogie: Es ist gleichbedeutend mit einer Gruppe von Fahrgästen, die sich darauf vorbereiten, in den Bus einzusteigen Bus, Sie können offiziell mit dem Fahren beginnen.

Natürlich gibt es einen Punkt, der beim Ausführen der Funktion „flushCallbacks“ schwer zu verstehen ist, nämlich: Warum muss die Warteschlange der Rückruffunktion gesichert werden? Wird die Callback-Funktionswarteschlange auch ausgeführt?

Weil es eine Situation geben wird: nextTick wendet nextTick an. Wenn FlushCallbacks keine spezielle Verarbeitung durchführt und die Rückruffunktion direkt in einer Schleife ausführt, wird die Rückruffunktion in nextTick in die Rückrufwarteschlange eingegeben. Dies entspricht dem Einsteigen der Fahrgäste des nächsten Busses in den vorherigen Bus.

Implementieren eines einfachen nextTick

Nachdem wir so viel gesagt haben, implementieren wir einen einfachen nextTick:

let callbacks = []
let pending = false

function nextTick (cb) {
    callbacks.push(cb)

    if (!pending) {
        pending = true
        setTimeout(flushCallback, 0)
    }
}

function flushCallback () {
    pending = false
    let copies = callbacks.slice()
    callbacks.length = 0
    copies.forEach(copy => {
        copy()
    })
}

Wie Sie sehen können, erhalten Sie in der einfachen Version von nextTick über nextTick die Callback-Funktion und führen Sie die Callback-Funktion asynchron über setTimeout aus. Auf diese Weise kann die Rückruffunktion im nächsten Tick ausgeführt werden, dh die Rückruffunktion wird ausgeführt, nachdem die Benutzeroberfläche erneut gerendert wurde.

Das obige ist der detaillierte Inhalt vonWelche Funktion hat nextTick in Vue? Einfache Implementierung von nextTick. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!