序文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 ピュア バージョンのオペレーティング システムをインストールします
閉鎖サービス nginx 停止systemctl 停止 nginx起動するサービス nginx 開始...
MySQLをインストールする6つの手順(インストールパッケージのみがインストール場所を選択できます)...
1. 前提条件インポートには require.context メソッドを使用します。vite で作成...
1. 公式ウェブサイトアドレス公式サイトではインストールの参考手順が紹介されています。公式サイトを見...
目次リスナーウォッチ形式リスナーを設定します。要約するリスナーウォッチ関数名は、リッスンする要素の名...
この記事では、MySqlのインストールとアンインストールのチュートリアルを参考までに紹介します。具体...
目次概要オブザーバーパターンの応用シナリオオブザーバーパターンの実装要約する概要オブザーバー パター...
数日前、図書館はサーバー(Ubuntu 14.04)にセキュリティ上の脆弱性があり、時間通りに修復さ...
ページ ヘッダーの固定レイアウトは、以前は position:fixed を使用して実装されていまし...
序文Linux グループは、Linux でユーザー アカウントを管理するために使用される組織単位です...
JavaScript DOM を読み終えた後、解釈型 JavaScript スクリプト言語に対する...
<本文> <div id="ルート"> <h1 ...
前提条件クラウドサーバー(Alibaba Cloud、Tencent CloudなどのcentOS)...
この記事の例では、スライダー検証を実装するためのjsキャンバスの具体的なコードを参考までに共有してい...
1. Python 3をダウンロードする https://www.python.org/ftp/py...