なぜ Vue は非同期レンダリングなのでしょうか?

理由: パフォーマンスを向上させることができます。非同期更新が使用されない場合、データが更新されるたびに現在のコンポーネントが再レンダリングされるため、パフォーマンス上の理由から、Vue はデータ更新があるたびにすぐに更新するのではなく、このラウンドのデータ更新後にビューを非同期的に更新します。 。 ビュー。

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

1. nextTick()

nextTick の原理と機能により、操作する DOM が確実に更新されます。

(1) 適用シナリオ : ビューが更新された後、新しいビューに基づいて操作を実行します。

データ変更後に実行される操作。この操作
• では、データ変更 とともに変更される DOM 構造の使用が必要です。この操作は、 nextTick() のコールバック関数に配置する必要があります。
created() フックで DOM 操作を実行する場合、
• DOM は created() でレンダリングされていないため、 を nextTick( ) コールバック関数内。
Vue は
• データ駆動型ビュー の考え方を採用していますが、場合によっては、依然として DOM を操作する必要があります。場合によっては、DOM1 のデータが変更され、DOM2 が DOM1 からデータを取得する必要がある場合、DOM2 のビューが更新されていないことがわかり、nextTick を使用する必要があります。

(2) 原則:

• nextTick の中核は次のとおりです。 Promise、MutationObserver、setImmediate、setTimeout などのネイティブ JS メソッドを使用する 対応するマイクロ/マクロ タスクの実装をシミュレートするために使用されます;
• 本質は JS を利用する これらの非同期コールバック タスク キューは、Vue フレームワークに独自の非同期コールバック キューを実装するために使用されます。
本質的には、 JS 実行原理イベント ループ

nextTick は、基礎となる JS 実行原理を特定のケースに適用する典型的な例です。

非同期更新キュー メカニズムを導入する理由:

が非同期更新 を使用しない場合、 データが更新されるたびに現在のコンポーネントが再レンダリングされます。 Soパフォーマンス上の理由から、Vue はこのラウンドのデータ更新後にビューを非同期的に更新します。 データが更新されるたびにビューをすぐに更新するのではなく。

#データ更新操作の後に DOM を操作するには、直後に
• nextTick(callback);# を使用します。 ##nextTick() は、
• 次のイベント ループの開始までコールバックを遅らせます。# DOM の更新が完了した後に実行されます。呼び出されると、最新の DOM 要素を取得できます。

vm.someData = '新しい値' と設定すると、DOM はすぐには更新されませんが、非同期キュー内でクリアされます。 ## 必要な DOM 更新は、次のイベント ループの開始時に更新

が実行された場合にのみ実行されます。

(3) vue のダウングレード戦略

Vue は内部的に

非同期キューを試行します

ネイティブを使用しますPromise.then、MutationObserver 、および setImmediate。実行環境がサポートしていない場合は、代わりに setTimeout(fn, 0) がダウングレード処理に使用されます。ダウングレード処理の目的は、flushCallbacks 関数をマイクロタスクまたはマクロタスクのキューに配置し、次のイベント ループが実行するのを待つことです。 このイベント ループのマイクロタスクでリフレッシュされた は、next イベント ループでも リフレッシュされる可能性があります。この

は、コード

の現在の実行環境に依存します。現在の実行環境が Promise をサポートしている場合、nextTick は実際に Promise を使用して内部で実行され、キューの更新はこのイベント ループのマイクロタスクで実行されます。 。 マイクロタスクを優先する理由: マイクロタスクでのキューの更新は、マクロタスクの UI レンダリングよりも 少ない回数更新されます。

。

2. Vue が非同期レンダリングを使用する理由
vue はコンポーネント レベルの更新です

、

コンポーネント 内部のデータが変更されると、コンポーネントが更新されます。例: this.a = 1、this.b=2 (同じウォッチャー)

(1) 理由: が非同期更新を使用しない場合 、 現在のコンポーネントはデータが更新されるたびに再レンダリングされます。 Soパフォーマンス上の理由から、Vue はこのラウンドのデータ更新後にビューを非同期的に更新します。 データが更新されるたびにビューをすぐに更新するのではなく。

(2) プロセス:

• Vue は dom 更新を非同期で実行します。変更が監視されると、Vue はキューを開き、同じイベント ループ内のデータ変更を監視するウォッチャーをこのキューにプッシュします。

• #このウォッチャーが複数回トリガーされた場合、キューにプッシュされるのは 1 回だけです。このバッファリング動作により、重複データが効果的に削除され、不必要な計算や DOM 操作が回避されます。

• 次のイベント ループで、Vue はキュー をクリアし、必要な DOM 更新を実行します。

3) ソースコード分析:

• データの場合Changes 、notify を通じて更新操作を実行するようにウォッチャーに通知します;

• subs[i].update を通じてウォッチャーの更新を順番に呼び出します (ビューはnot updated);

• Put the watcher into the queue. queueWatcher は、ID に基づいてウォッチャーを重複排除します (複数の属性が 1 つのウォッチャーに依存します)。ウォッチャーがキューにない場合、ウォッチャーは削除されます。キューに追加されます (ビューは更新されません);

• nextTick を使用して、flushSchedulerQueue メソッドを非同期的に実行しますウォッチャー キューを更新する (ビューを更新する);

[関連する推奨事項:

vuejs ビデオ チュートリアル, Web フロントエンド開発]

以上がなぜ Vue は非同期レンダリングなのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。