Detaillierte Erläuterung der Verwendung des Vue nextTick-Mechanismus

Dieses Mal werde ich Ihnen die Verwendung des Vue nextTick-Mechanismus ausführlich erläutern. Was sind die Vorsichtsmaßnahmen, wenn Sie den Vue nextTick-Mechanismus verwenden?

Sehen wir uns zunächst einen Teil des Vue-Ausführungscodes an:

export default {
 data () {
  return {
   msg: 0
  }
 },
 mounted () {
  this.msg = 1
  this.msg = 2
  this.msg = 3
 },
 watch: {
  msg () {
   console.log(this.msg)
  }
 }
}

Wir gehen davon aus, dass dieses Skript nach der Ausführung nach 1000 m der Reihe nach gedruckt wird: 1, 2, 3. Tatsächlich wird es jedoch nur einmal ausgegeben: 3. Warum passiert das? Finden wir es heraus.

queueWatcher

Wir definieren watch, um Nachrichten abzuhören, die tatsächlich von Vue wie vm.$watch(keyOrFn, handler, options) aufgerufen werden. $watch ist eine Funktion, die bei der Initialisierung an vm gebunden ist und zum Erstellen von Watcher-Objekten verwendet wird. Schauen wir uns also an, wie der Handler im Watcher gehandhabt wird:

this.deep = this.user = this.lazy = this.sync = false
...
 update () {
  if (this.lazy) {
   this.dirty = true
  } else if (this.sync) {
   this.run()
  } else {
   queueWatcher(this)
  }
 }
...

Anfangseinstellung this.deep = this.user = this.lazy = this.sync = false, d. h. wenn ein Update ausgelöst wird, So führen Sie die queueWatcher-Methode aus:

const queue: Array<Watcher> = []
let has: { [key: number]: ?true } = {}
let waiting = false
let flushing = false
...
export function queueWatcher (watcher: Watcher) {
 const id = watcher.id
 if (has[id] == null) {
  has[id] = true
  if (!flushing) {
   queue.push(watcher)
  } else {
   // if already flushing, splice the watcher based on its id
   // if already past its id, it will be run next immediately.
   let i = queue.length - 1
   while (i > index && queue[i].id > watcher.id) {
    i--
   }
   queue.splice(i + 1, 0, watcher)
  }
  // queue the flush
  if (!waiting) {
   waiting = true
   nextTick(flushSchedulerQueue)
  }
 }
}

Die Funktion „flushSchedulerQueue“ in nextTick(flushSchedulerQueue) ist hier tatsächlich die AnsichtAktualisierung des Beobachters:

function flushSchedulerQueue () {
 flushing = true
 let watcher, id
 ...
 for (index = 0; index < queue.length; index++) {
  watcher = queue[index]
  id = watcher.id
  has[id] = null
  watcher.run()
  ...
 }
}

Außerdem gilt in Bezug auf die Wartevariable: Dies ist ein sehr wichtiges Flag, das sicherstellt, dass der FlushSchedulerQueue-Rückruf nur einmal in Rückrufen platziert werden darf. Schauen wir uns als nächstes die nextTick-Funktion an. Bevor wir über nexTick sprechen, müssen Sie über ein gewisses Verständnis von Event Loop, microTask und MacroTask verfügen. Wenn Sie es noch nicht verstehen, können Sie sich meinen Artikel Einführung in die Ereignisschleife ansehen. Werfen wir nun einen Blick auf die Implementierung:

export const nextTick = (function () {
 const callbacks = []
 let pending = false
 let timerFunc
 function nextTickHandler () {
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {
   copies[i]()
  }
 }
 // An asynchronous deferring mechanism.
 // In pre 2.4, we used to use microtasks (Promise/MutationObserver)
 // but microtasks actually has too high a priority and fires in between
 // supposedly sequential events (e.g. #4521, #6690) or even between
 // bubbling of the same event (#6566). Technically setImmediate should be
 // the ideal choice, but it&#39;s not available everywhere; and the only polyfill
 // that consistently queues the callback after all DOM events triggered in the
 // same loop is by using MessageChannel.
 /* istanbul ignore if */
 if (typeof setImmediate !== &#39;undefined&#39; && isNative(setImmediate)) {
  timerFunc = () => {
   setImmediate(nextTickHandler)
  }
 } else if (typeof MessageChannel !== 'undefined' && (
  isNative(MessageChannel) ||
  // PhantomJS
  MessageChannel.toString() === '[object MessageChannelConstructor]'
 )) {
  const channel = new MessageChannel()
  const port = channel.port2
  channel.port1.onmessage = nextTickHandler
  timerFunc = () => {
   port.postMessage(1)
  }
 } else
 /* istanbul ignore next */
 if (typeof Promise !== 'undefined' && isNative(Promise)) {
  // use microtask in non-DOM environments, e.g. Weex
  const p = Promise.resolve()
  timerFunc = () => {
   p.then(nextTickHandler)
  }
 } else {
  // fallback to setTimeout
  timerFunc = () => {
   setTimeout(nextTickHandler, 0)
  }
 }
 return function queueNextTick (cb?: Function, ctx?: Object) {
  let _resolve
  callbacks.push(() => {
   if (cb) {
    try {
     cb.call(ctx)
    } catch (e) {
     handleError(e, ctx, 'nextTick')
    }
   } else if (_resolve) {
    _resolve(ctx)
   }
  })
  if (!pending) {
   pending = true
   timerFunc()
  }
  // $flow-disable-line
  if (!cb && typeof Promise !== 'undefined') {
   return new Promise((resolve, reject) => {
    _resolve = resolve
   })
  }
 }
})()

Zuerst simuliert Vue die Ereigniswarteschlange durch Rückruf Array , Ereignisse im Event-Team werden über die nextTickHandler-Methode aufgerufen und was ausgeführt wird, wird von timerFunc bestimmt. Werfen wir einen Blick auf die Definition von timeFunc:

if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  timerFunc = () => {
   setImmediate(nextTickHandler)
  }
 } else if (typeof MessageChannel !== 'undefined' && (
  isNative(MessageChannel) ||
  // PhantomJS
  MessageChannel.toString() === '[object MessageChannelConstructor]'
 )) {
  const channel = new MessageChannel()
  const port = channel.port2
  channel.port1.onmessage = nextTickHandler
  timerFunc = () => {
   port.postMessage(1)
  }
 } else
 /* istanbul ignore next */
 if (typeof Promise !== 'undefined' && isNative(Promise)) {
  // use microtask in non-DOM environments, e.g. Weex
  const p = Promise.resolve()
  timerFunc = () => {
   p.then(nextTickHandler)
  }
 } else {
  // fallback to setTimeout
  timerFunc = () => {
   setTimeout(nextTickHandler, 0)
  }
 }

Sie können die Definitionspriorität von timerFunc MacroTask -> MicroTask sehen. In einer Umgebung ohne Dom verwenden Sie MicroTask, z. B. Weex

setImmediate, MessageChannel VS setTimeout

Wir definieren zuerst setImmediate und MessageChannel, um MacroTask anstelle von setTimeout zu erstellen. HTML5 legt fest, dass die minimale Zeitverzögerung von setTimeout 4 ms beträgt, was bedeutet, dass unter idealen Umständen der schnellste asynchrone Rückruf, der ausgelöst werden kann, 4 ms beträgt. Vue verwendet so viele Funktionen, um asynchrone Aufgaben zu simulieren, mit nur einem Zweck, nämlich den Rückruf asynchron zu machen und so früh wie möglich aufzurufen. Die Verzögerungen von MessageChannel und setImmediate sind offensichtlich kleiner als setTimeout.

Probleme lösen

Mit diesen Grundlagen im Hinterkopf schauen wir uns die oben genannten Probleme noch einmal an. Da der Ereignismechanismus von Vue die Ausführung über die Ereigniswarteschlange plant, wartet er vor der Planung darauf, dass der Hauptprozess inaktiv ist. Gehen Sie also zurück und warten Sie, bis alle Prozesse abgeschlossen sind, bevor Sie die Aktualisierung durchführen. Dieser Leistungsvorteil liegt beispielsweise auf der Hand:

Jetzt gibt es eine Situation, in der der Wert von test beim Mounten 1000 Mal von der ++Schleife ausgeführt wird. Jedes Mal, wenn ++ ausgelöst wird, wird setter->Dep->Watcher->update->run entsprechend ausgelöst. Wenn die Ansicht zu diesem Zeitpunkt nicht asynchron aktualisiert wird, betreibt ++ das DOM direkt, um die Ansicht jedes Mal zu aktualisieren, was sehr leistungsintensiv ist. Daher implementiert Vue eine Warteschlange und die Ausführung des Watchers in der Warteschlange wird beim nächsten Tick (oder in der Mikrotask-Phase des aktuellen Ticks) einheitlich ausgeführt. Gleichzeitig werden Beobachter mit derselben ID nicht wiederholt zur Warteschlange hinzugefügt, sodass der Beobachterlauf nicht 1.000 Mal ausgeführt wird. Durch die endgültige Aktualisierung der Ansicht wird nur das dem Test entsprechende DOM direkt von 0 auf 1000 geändert. Es ist garantiert, dass die Aktion zum Aktualisieren der Ansicht zum Betreiben des DOM beim nächsten Tick (oder in der Mikrotask-Phase des aktuellen Ticks) aufgerufen wird, nachdem der aktuelle Stapel ausgeführt wurde, was die Leistung erheblich optimiert.

Interessante Frage

var vm = new Vue({
  el: '#example',
  data: {
    msg: 'begin',
  },
  mounted () {
   this.msg = 'end'
   console.log('1')
   setTimeout(() => { // macroTask
     console.log('3')
   }, 0)
   Promise.resolve().then(function () { //microTask
    console.log('promise!')
   })
   this.$nextTick(function () {
    console.log('2')
   })
 }
})

Jeder muss die Ausführungsreihenfolge kennen und sie der Reihe nach ausdrucken: 1, Versprechen, 2, 3.

1. Da this.msg = 'end' zuerst ausgelöst wird, wird die Aktualisierung des Watchers ausgelöst, wodurch der Rückruf des Aktualisierungsvorgangs in die Ereigniswarteschlange von Vue verschoben wird.

2. this.$nextTick führt auch eine neue Callback-Funktion für den Ereigniswarteschlangen-Push ein. Sie kommen alle über setImmediate --> Promise --> Promise.resolve().then ist eine MicroTask, daher wird das Versprechen zuerst gedruckt.

3. Wenn MessageChannel und setImmediate unterstützt werden, hat ihre Ausführungsreihenfolge Vorrang vor setTimeout (in IE11/Edge kann die Verzögerung von setImmediate innerhalb von 1 ms liegen, während setTimeout eine Mindestverzögerung von 4 ms hat, sodass setImmediate die Callback-Funktion früher als setTimeout(0). Zweitens wird 2 gedruckt und dann 3

4. , da das Callback-Array zuerst in der Ereigniswarteschlange empfangen wird Wenn MessageChannel und setImmediate nicht unterstützt werden, wird timeFunc über Promise definiert und die alte Version von Vue vor 2.4 führt Promise zuerst aus. Diese Situation führt dazu, dass die Reihenfolge wie folgt lautet: 1, 2, Versprechen, 3. Da this.msg zuerst die Dom-Aktualisierungsfunktion auslösen muss, wird die Dom-Aktualisierungsfunktion zuerst vom Rückruf in die asynchrone Zeitwarteschlange empfangen und dann Promise.resolve().then(function () { console.log('promise! ')} wird eine solche MicroTask definiert und dann wird $nextTick vom Callback erfasst. Wir wissen, dass die Warteschlange das First-In-First-Out-Prinzip erfüllt, sodass die vom Rückruf gesammelten Objekte zuerst ausgeführt werden.

Postscript

Wenn Sie sich für Vue-Quellcode interessieren, können Sie hierher kommen: Weitere interessante Erklärungen zum Vue-Convention-Quellcode

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

JS implementiert die Transparenzgradientenfunktion

jQuery-Durchquerung von XML-Knoten und Implementierungsschritten für Attribute

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des Vue nextTick-Mechanismus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!