Heim > Artikel > Web-Frontend > $nextTick VS setTimeout, sehen Sie sich ihre Unterschiede an
In diesem Artikel werden $nextTick und setTimeout kurz verglichen, um die Unterschiede zwischen ihnen zu sehen.
Ein Frontend-Entwickler (Xiao Zhi) betrat eine Vue-Bar. Ash bestellte seinen Lieblingscocktail: Nuxt. Der Barkeeper arbeitet hart daran, es zuzubereiten. Dann fing er an, vor sich hin zu plappern.
Xiao Zhi erzählte, wie er $nextTick
unter der Instanzmethode von Vue 3 entdeckte und überrascht war. Xiaozhi verwendet Vue schon seit einiger Zeit und hat sich daran gewöhnt, $watch
und $emit
als Instanzmethoden zu schreiben. Wofür wird also $nextTick verwendet? In der Vue-Dokumentation heißt es, dass es „einen Rückruf [aufschiebt], der nach dem nächsten DOM-Aktualisierungszyklus ausgeführt wird“. $nextTick
的,并大吃一惊。小智使用Vue已经有一段时间了,他已经习惯了把$watch
和$emit
写成实例方法。那么,$nextTick是用来做什么的?Vue文档说,它"[defers]回调,在下一个DOM更新周期后执行"。
但是小智并不相信。
他继续讲述他是如何尝试这样做的:
this.loadingAnimation = true this.startVeryLongCalculation() this.completeVeryLongCalculation() this.loadingAnimation = false
有用。 为什么?
nextTick
接受一个延迟到下一个DOM更新周期的回调函数。这只是Vue的一种说法,"嘿,如果你想在DOM更新后执行一个函数(这种情况很少发生),我希望你使用nextTick
而不是setTimeout
"。
Vue.nextTick(() => {}) // syntax
下面很快就会讲到setTimeout
和nextTick
参数。我们用这个例子来可视化nextTick
的行为:
<template> <div> {{ currentTime }} </div> </template> <script> export default { name: 'getCurrentTime', data() { return { currentTime: '' } }, mounted() { this.currentTime = 3; this.$nextTick(() => { let date = new Date() this.currentTime = date.getFullYear() }); } } </script>
在J电脑上运行这个代码片段。它将显示2021
年。并不是说如果你去掉nextTick
,就不会得到同样的结果。然而,你应该明白,Vue会根据数据中的内容对DOM进行修改。
在上面的代码片段中,Vue将DOM更新为3
,然后调用回调,将DOM更新为2021
,最后将控制权交给浏览器,浏览器将显示2021
。
到目前为止,我们已经研究了nextTick在回调队列中插入回调函数并在适当的时候执行该函数。
这个你可能会感兴趣,nextTick
中的回调是作为事件循环中的一个微任务使用的。nextTick
的源代码明确指出,"nextTick
行为利用了微任务队列,可以通过本地的Promise.then
或MutationObserver
来访问。"
在DOM更新后执行函数的另一种方法是使用JavaScript的setTimeout()
函数。
我们将上面的代码用setTimeout
替换nextTick
:
<template> <div> {{ currentTime }} </div> </template> <script> export default { name: 'getCurrentTime', data() { return { currentTime: '' } }, mounted() { this.currentTime = 3; setTimeout(() => { let date = new Date() this.currentTime = date.getFullYear() }, 0); } } </script>
运行此代码片段。 首先看到3
然后2021
。它发生得很快,因此如果没有看到此行为,需要刷新浏览器。
在上面的代码片段中,Vue将DOM更新为3
,并提供浏览器控制。然后浏览器显示3
,调用回调函数,将DOM更新到2021
,最后将控制权交给浏览器,现在浏览器显示2021
。
nextTick
的实现在不支持Promise
和MutationObserver
的浏览器(IE 6-10和Opera Mini浏览器)上,使用setTimeout
作为后备方法,对于不支持Promise
和MutationObserver
的浏览器(IE 10),它更倾向于setImmediate
。
setTimeout
时Uncaught (in promise) DOMException
等错误。记住,Vue是异步更新DOM的最后来个示例:
<div id="app"> <div ref="listScroll" class="scrolledList"> <ul ref="scrolledHeight"> <li v-for="month in months"> {{month}} </li> </ul> </div> <input type="text" placeholder="Add Month" v-model="month"> <button @click="addMessage" @keyup.enter="addMessage"> Add Month</button> </div> <script src="https://unpkg.com/vue@next"> Vue.createApp({ data() { return { month: '', months: ['Jan', 'Feb', 'Apr', 'May', 'June', 'July', 'Aug'] } }, mounted() { this.updateScrollNextTick() }, methods: { addMessage() { if(this.month == ''){ return } this.months.push(this.month) this.month = '' this.updateScrollNextTick() }, updateScrollNextTick () { let scrolledHeight = this.$refs.scrolledHeight.clientHeight this.$nextTick(() => { this.$refs.listScroll.scrollTo({ behavior: 'smooth', top: scrolledHeight }) }) } }, }) .mount("#app") </script>
示例地址:https://codepen.io/ammezie/pen/OJpOvQE
主要部分:
运行结果:
在上面的代码片断中,我们想在一个新项目被添加到列表中时获得平滑的向下滚动效果。浏览一下代码,尝试修改一下,去掉nextTick
,你就会失去那种平滑的滚动效果。你也可以尝试用setTimeout
来代替nextTick
rrreee
Es funktioniert. Warum?🎜Main Teil: 🎜🎜🎜 🎜Laufergebnisse: 🎜🎜🎜🎜Im obigen Codeausschnitt möchten wir einen reibungslosen Scroll-Down-Effekt erzielen, wenn ein neues Element zur Liste hinzugefügt wird. Schauen Sie sich den Code an und versuchen Sie, ihn so zu ändern, dassWas macht nextTick?
nextTick
akzeptiert eine Rückruffunktion, die bis zum nächsten DOM-Aktualisierungszyklus verzögert wird. Dies ist nur Vues Art zu sagen: „Hey, wenn Sie eine Funktion ausführen möchten, nachdem das DOM aktualisiert wurde (was selten vorkommt), möchte ich, dass SienextTick
anstelle vonsetTimeout verwenden. Code>". <p>rrreee</p>Die Parameter <code>setTimeout
undnextTick
werden bald besprochen. Wir verwenden dieses Beispiel, um das Verhalten vonnextTick
zu visualisieren:rrreee
Führen Sie dieses Codefragment auf einem J-Computer aus. Es wird das Jahr2021
angezeigt. Es ist nicht so, dass Sie nicht das gleiche Ergebnis erhalten, wenn SienextTick
entfernen. Sie sollten jedoch verstehen, dass Vue das DOM basierend auf dem Inhalt der Daten ändert. Im obigen Codeausschnitt aktualisiert Vue das DOM auf3
, ruft dann den Rückruf auf, um das DOM auf2021
zu aktualisieren, und übergibt schließlich die Kontrolle an den Browser, durchsuchen Sie die Der Browser zeigt2021
an. 🎜🎜Bisher haben wir uns angeschaut, wie nextTick eine Rückruffunktion in die Rückrufwarteschlange einfügt und die Funktion zum richtigen Zeitpunkt ausführt. 🎜🎜Das könnte Sie interessieren. Der Callback innextTick
wird als Mikrotask in der Ereignisschleife verwendet.nextTick
s Quellcode besagt eindeutig, dass das „nextTick
-Verhalten die Mikrotask-Warteschlange nutzt und über die lokale Schnittstelle darauf zugegriffen werden kannPromise.then
oderMutationObserver
für den Zugriff auf „🎜setTimeout vs nextTick🎜🎜Eine weitere Möglichkeit, eine Funktion nach dem DOM-Update auszuführen. Verwenden Sie die JavaScript-Funktion
setTimeout()
. 🎜🎜Wir ersetzen den obigen Code durchsetTimeout
und ersetzennextTick
: 🎜rrreee🎜Führen Sie dieses Code-Snippet aus. Siehe zuerst3
und dann2021
. Dies geschieht schnell. Wenn Sie dieses Verhalten nicht bemerken, müssen Sie Ihren Browser aktualisieren. 🎜🎜Im obigen Codeausschnitt aktualisiert Vue das DOM auf3
und stellt die Browsersteuerung bereit. Dann zeigt der Browser3
an, ruft die Rückruffunktion auf, aktualisiert das DOM auf2021
und übergibt schließlich die Kontrolle an den Browser. Jetzt zeigt der Browser2021
an > >. 🎜🎜nextTick
ist in Browsern implementiert, diePromise
undMutationObserver
nicht unterstützen (IE 6-10 und Opera Mini-Browser), verwenden Sie setTimeout
wird als Fallback-Methode verwendet und bevorzugtsetImmediate
für Browser, die den CodePromise
undMutationObserver
(IE 10) nicht unterstützen >. 🎜Wann Sie nexttick verwenden sollten🎜
🎜Hier ist zum Schluss ein Beispiel:🎜rrreee🎜🎜Beispieladresse: https://codepen.io/ammezie/pen/OJpOvQE🎜
- Wenn Sie
setTimeout
- Wann Sie sichergehen möchten Das DOM kann beim Reflektieren Ihrer Daten
- Beim Versuch, einen asynchronen Vorgang auszuführen, stoßen Sie auf Fehler wie
Uncaught (in Promise) DOMException
. Denken Sie daran, dass Vue das DOM asynchron aktualisiert
nextTick
entfernt wird. Der reibungslose Scrolleffekt geht dann verloren. Sie können auch versuchen, setTimeout
anstelle von nextTick
zu verwenden. 🎜🎜Zusammenfassung🎜🎜In diesem Artikel haben wir untersucht, wie nextTick funktioniert. Wir schauen uns die Unterschiede zum normalen JavaScript setTimeout genauer an und gehen auf praktische Anwendungsfälle ein. 🎜🎜🎜Englische Originaladresse: https://blog.logrocket.com/understanding-nexttick-in-vue-js/🎜🎜Autor: Chimezie Enyinnaya🎜🎜Übersetzer: Front-end Xiaozhi🎜🎜Nachdruckadresse: https:// segmentfault.com/a/1190000040246186🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !
Das obige ist der detaillierte Inhalt von$nextTick VS setTimeout, sehen Sie sich ihre Unterschiede an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!