イベントループとは何ですか?
イベントループはJSの実行機構です(イベントループとも呼ばれます)
JS のイベント ループを知る必要があるのはなぜですか?
Vue は JS をベースに開発されているため、実際には Vue の下部にある多くのコード原則は JS の原則に基づいて記述されており、イベント ループを理解することで、Vue におけるさまざまなイベントの実行順序をより明確に理解することができます。 , この記事では、nextTick と JS イベント ループの関係について説明します。
イベントループ
まずブラウザについてですが、ブラウザのプロセスには多数のスレッドがあり、そのうちの 1 つは JSエンジン スレッドであり、GUI レンダリング スレッドもあります。これら 2 つのスレッドは相互に排他的です。1 つのプロセスは実行中、もう 1 つは一時停止されています。そう考えるのは正しいことです。ブラウザは、JS コードを解析した後でのみページをレンダリングします。それ以外の場合、ページの DOM 要素を変更しているときにページがレンダリングされる場合は、 、ページエラーが発生する可能性があります。
JS エンジン スレッドはイベント ループに基づいて実行されます。
その実行シーケンスは次のとおりです。
1. すべての同期コードはメイン スレッドで実行され、同期タスクの行が実行されるたびに、実行スタックにプッシュされます。
2. 非同期タスクが発生すると、JS は非同期タスクをブラウザの WebAPI に渡して処理し (実際には、Ajax、setTimeout などに似ています)、非同期タスクの実行結果を「非同期タスク」にプッシュします。処理後のタスクキュー」。ただし、非同期タスクキューにはマクロタスクキューとマイクロタスクキューがあり、以下に代表的なマクロタスクとマイクロタスクについて説明する。
3. 実行スタック内のすべての同期タスクが実行された後、システムは非同期タスク キュー内の非同期イベントの実行を開始します。マイクロタスクはマクロタスクよりも優先度が高いため、最初にマイクロタスクを実行してからマクロタスクを実行することに注意してください。マクロ タスクを実行する場合、マクロ タスクが実行されるたびに、ブラウザはマイクロ タスク キューに新しいマイクロ タスクがあるかどうかを確認し、あればそれを実行し、マクロの実行を継続することにも注意してください。そうでない場合はタスク。
4. メインスレッドは上記の 3 つのステップを繰り返し実行します。
次のような簡単なグラフを描きます。
では、マクロタスクとミクロタスクとは何でしょうか?
マクロタスク: setTimeout、SetInterval、MessageChannel など。
マイクロタスク: Promise.then、async/await など。
次のティック
nextTick は実際にはこの仕組みに従って内部的に動作します。nextTick がページのレンダリング後にブラウザーが実行するコールバックであることは誰もが知っています。なぜ？
前回の記事で触れた Vue 公式 Web サイトに「Dom の更新時に Vue は非同期で実行される」と記載されていたのを今でも覚えています。これは、vue が非同期タスクを通じてページをレンダリングするため、ページも非同期タスク キューにプッシュされることを意味します。nextTick の内部では、コールバックを非同期タスク (マイクロタスクまたはマクロタスク) として自分で記述し、それを vue 更新 dom の非同期タスクの背後 (通常はイベント ループの最後) に置くため、nextTick は操作する機能を追加しました。 domが更新された後のページ。
nextTick に関する記事については、特に次の記事を読むことをお勧めします。この記事では nextTick のソース コードも説明しています: 1000 語で nextTick の原理をマスターできます (baidu.com)
-------------------------------------------------- --------
以上がこの記事の内容ですが、実際に私も学習の過程で、学んだ知識をもとに自分なりの知識体系を構築する必要があることに気づきました。さまざまな知識を結びつけることができるので、JS の基礎となる原則をいくつか学ぶことができ、Vue の原則もすぐに習得できます。