序文Vue3 には多くの注目すべき機能が追加されましたが、サスペンス コンポーネントもその 1 つです。これは非同期リクエスト データを処理するのに非常に実用的です。この記事では、簡単な例を通してその使い方を紹介します。興味がある場合は、公式ドキュメントを参照してください。 コンポーネントが正しくレンダリングされる前に、何らかの非同期リクエストを実行する必要があることはよくあります。これは通常、開発者がこれを処理するために設計したメカニズムによって処理されます。これを行うには多くの優れた方法があります。 たとえば、API から非同期的にデータを取得し、応答データが解析されるときに読み込み効果などの情報を表示する場合は、Vue3 の suspense コンポーネントを使用してそのような要件を実行できます。 コンポーネントの作成コンポーネントを作成し、Peoples.vue という名前を付けます。そのコンポーネント コードは次のとおりです。 <テンプレート> <div v-for="(people, index) in peoples.results" :key="index"> {{ people.name }} {{ people.birth_year }} </div> </テンプレート> <スクリプト> "vue" から { ref } をインポートします。 エクスポートデフォルト{ 名前: 「CyPeoples」、 非同期セットアップ() { const peoples = ref(null); const ヘッダー = { "Content-Type": "application/json" }; const fetchPeoples = fetch("https://swapi.dev/api/people", { を待機します。 ヘッダー、 }); peoples.value = fetchPeoples.json() を待機します。 { 人々 } を返します。 }, }; </スクリプト> ここで、コンポーネント状態の反応性を保証するために ref が導入されています。したがって、上記のコード スニペットによれば、ムービー データは非同期 API 呼び出しを通じて取得されます。 さて、サスペンスを使用してアプリケーションに読み込み情報を表示してみましょう。 App.vue ファイルを変更して、コードを次のようにします。 <テンプレート> <div> <h1>スターウォーズのキャラクター</h1> </div> <サスペンス> <テンプレート #デフォルト> <サイピープルズ /> </テンプレート> <テンプレート #フォールバック> <div> <h3>データを読み込んでいます...</h3> </div> </テンプレート> </サスペンス> </テンプレート> <スクリプト> 「./components/Peoples.vue」からCyPeoplesをインポートします。 「vue」から { suspense } をインポートします。 エクスポートデフォルト{ 名前:「アプリ」、 コンポーネント: サイピープルズ、 サスペンス、 }, }; </スクリプト> 上記のコード スニペットから、非同期リクエストが完了した後に UI を表示するための初期化テンプレート コンポーネントとして #default を使用し、サスペンス コンポーネントを使用して読み込み効果を簡単に実現できます。 #fallback は、非同期リクエスト内の処理 UI であり、一般的な読み込み効果です。 要約するサスペンス コンポーネントは、非同期リクエスト UI の処理ロジックを簡素化する Vue3 の新機能です。 Vue3 非同期データ読み込みコンポーネントサスペンスに関するこの記事はこれで終わりです。Vue3 非同期データ読み込みコンポーネントサスペンスに関するその他の関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Windows 環境での MySQL 8.0 のインストール、設定、アンインストール
>>: VMware Workstation Pro は Win10 ピュア バージョンのオペレーティング システムをインストールします
ネイティブ JS で実装したリアルタイム クロック エフェクトを共有します。エフェクトは以下のとおり...
最近、プロジェクトで問題が発生しました。サーバー側のプログラムが突然クラッシュして終了しました。クラ...
Ubuntuでsshを開くのに1時間以上かかりました。主な原因は、最初に読んだチュートリアルの手順...
1. docker設定ファイルを変更し、ポート2375を開きます。 [root@s162 docke...
目次序文接続管理追加の接続管理ポート要約する序文皆さんの多くは、次のようなエラー メッセージに遭遇し...
Docker はコンテナを起動するときにアクセス ポートを指定します。複数の -p オプションを使用...
序文指定した文字による結合または分割は一般的なシナリオです。MySQL では結合の記述は比較的簡単で...
my.ini とは何ですか? my.ini は、MySQL データベースで使用される設定ファイルです...
1. 既存のnginxがipv6をサポートしているかどうかを確認する既存の nginx が ipv6...
Redis クラスターとはRedis クラスターは、Redis が提供する分散データベース ソリ...
序文この記事を始める前に、複数選択の質問をしてみましょう。フロントエンド開発でビルド ツールを使用す...
一言で言えば: データハイジャック (Object.defineProperty) + パブリッシュ...
目次序文導入ライブ使いやすいルートスコープマウント要素の指定ライフサイクルコンポーネントグローバル状...
序文この記事では、DDCTF の 5 番目の質問、つまり不明なフィールド名をバイパスする手法を紹介し...
目次charとvarcharの違いcharとvarcharの違い上記は、MySQL における cha...