Dieses Mal zeige ich Ihnen, wie Sie Vue nextTick verwenden und welche Vorsichtsmaßnahmen bei der Verwendung von Vue nextTick gelten. Hier ist ein praktischer Fall, schauen wir uns das an.
export default {
data () {
return {
msg: 0
}
},
mounted () {
this.msg = 1
this.msg = 2
this.msg = 3
},
watch: {
msg () {
console.log(this.msg)
}
}
}Nach dem Login kopieren
Nach der Ausführung dieses Skripts gehen wir davon aus, dass es 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)
}
}
...Nach dem Login kopieren
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)
}
}
}Nach dem Login kopieren
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()
...
}
}Nach dem Login kopieren
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. Schauen wir uns nun die Implementierung an:
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'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 !== '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)
}
}
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
})
}
}
})()Nach dem Login kopieren
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)
}
}Nach dem Login kopieren
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 erneut aktualisieren. 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')
})
}
})Nach dem Login kopieren
Jeder muss die Ausführungsreihenfolge kennen und sie der Reihe nach ausdrucken: 1, Versprechen, 2, 3.
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.
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.
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
- , 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.
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:
Wie man JS bedient, um eine Transparenzverlaufsanimation zu realisieren
Wie man JS bedient, um eine einfache Faltung zu realisieren und sich entfaltende Animation
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue nextTick. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
