$nextTick VS setTimeout、その違いを確認してください

この記事では、$nextTick と setTimeout を簡単に比較して、両者の違いを確認します。

フロントエンド開発者 (Xiao Zhi) が Vue バーに入ってきました。アッシュはお気に入りのカクテル、ヌクストを注文しました。バーテンダーさんが一生懸命作ってくれています。それから彼は独り言を言い始めました。

Xiao Zhi さんは、Vue 3 のインスタンス メソッドで$nextTickを発見し、驚いた様子を語りました。 Xiaozhi はしばらく Vue を使用しており、インスタンス メソッドとして$watchと$emitを記述することに慣れてきました。では、$nextTick は何に使用されるのでしょうか? Vue のドキュメントには、「次の DOM 更新サイクルの後に実行されるコールバックが [延期される]」と記載されています。

しかし、シャオジーはそれを信じませんでした。

彼は続けて、これをどのように試みたかを語りました:

this.loadingAnimation = true this.startVeryLongCalculation() this.completeVeryLongCalculation() this.loadingAnimation = false

うまくいきました。なぜ？

nextTickそれは何をするのですか?

nextTick次の DOM 更新サイクルまで遅延されるコールバック関数を受け入れます。これは、Vue が「DOM が更新された後に関数を実行したい場合 (これはめったに起こりません)、setTimeoutの代わりにnextTickを使用してください」と言っているだけです。 」。

Vue.nextTick(() => {}) // syntax

setTimeoutおよびnextTickパラメーターについては、後ほど説明します。この例を使用して、nextTick:

このコード スニペットを J コンピューターで実行して、の動作を視覚化します。2021年が表示されます。nextTickを削除しても同じ結果が得られないというわけではありません。ただし、Vue はデータの内容に基づいて DOM を変更することを理解する必要があります。

上記のコード スニペットでは、Vue は DOM を3に更新してからコールバックを呼び出し、DOM を2021に更新し、最後に制御をブラウザーに渡します。ブラウザには2021が表示されます。

これまで、コールバック キューにコールバック関数を挿入し、適切なタイミングで関数を実行する nextTick について見てきました。

これに興味があるかもしれません。nextTickのコールバックは、イベント ループ内のマイクロタスクとして使用されます。nextTickのソース コードには、「nextTickの動作はマイクロタスク キューを利用し、ローカルのPromise.thenまたは # を介して渡すことができる」と明確に記載されています。 # #MutationObserverにアクセスします。"

setTimeout()関数を使用することです。

setTimeoutnextTick:

3を参照し、次に2021を参照してください。これはすぐに発生するため、この動作が表示されない場合はブラウザを更新する必要があります。

3に更新し、ブラウザー コントロールを提供します。次に、ブラウザーは3を表示し、コールバック関数を呼び出し、DOM を2021に更新し、最後にブラウザーに制御を渡します。これで、ブラウザーには2021が表示されます。

nextTickの実装は、PromiseおよびMutationObserverをサポートしていないブラウザ (IE 6-10 および Opera Mini ブラウザ) で使用されます。 setTimeoutはフォールバック メソッドとして使用され、PromiseおよびMutationObserver(IE 10) をサポートしないブラウザーではsetImmediateが優先されます。

• setTimeout
DOM にデータが反映されていることを確認したい場合
非同期操作を実行しようとすると、
• Uncaught (in Promise) DOMExceptionなどのエラーが発生しました。 Vue は DOM を非同期で更新することに注意してください。

 
 
 
 {{month}} 
 
 
   Add Month 
 

サンプル アドレス: https://codepen.io/ammezie/pen/OJpOvQE

#実行結果:

#上記のコード スニペットでは、新しい項目がリストに追加されたときに、スムーズに下にスクロールする効果を得る必要があります。コードを見て、

を削除するようにコードを変更してみると、スムーズなスクロール効果が失われます。nextTickの代わりにsetTimeoutを使用してみることもできます。概要

この記事では、nextTick がどのように機能するかを検討しました。通常の JavaScript setTimeout との違いを詳しく見ていき、実際の使用例についても取り上げます。

著者: Chimezie Enyinnaya

翻訳著者: フロントエンド Xiaozhi

転載アドレス: https://segmentfault.com/a/1190000040246186

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！

以上が$nextTick VS setTimeout、その違いを確認してくださいの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。