Vue3非同期コンポーネントSuspenseの使い方

サスペンス コンポーネント

公式 Web サイトには、これが実験的な機能であると記載されています:
bb06e69d307cb52103d07d8f9dd385e5 は実験的な機能です。必ずしも最終的に安定した機能になるとは限らず、安定する前に API が変更される可能性があります。
bb06e69d307cb52103d07d8f9dd385e5 は、コンポーネント ツリー内の非同期依存関係の処理を調整するために使用される組み込みコンポーネントです。これにより、以下の複数の入れ子になった非同期依存関係が解決されるまでコンポーネント ツリーの上位で待機し、待機中に読み込み状態をレンダリングできます。

これは、アプリケーションのユーザー エクスペリエンスが向上するように、このコンポーネントが非同期コンポーネントの待機中に追加のコンテンツをレンダリングするために使用されることを意味します。

理解するには f57fcb8831668b90ea0f8700299c4b51 この問題とそれが非同期依存関係とどのように相互作用するかを解決するには、次のようなコンポーネント階層を想像する必要があります:

<Suspense>
└─ <Dashboard>
   ├─ <Profile>
   │  └─ <FriendStatus>（组件有异步的 setup()）
   └─ <Content>
      ├─ <ActivityFeed> （异步组件）
      └─ <Stats>（异步组件）

このコンポーネント ツリーには複数のネストされたコンポーネントがあります。レンダリングするには、最初に次のコンポーネントがあります。いくつかの非同期リソースを解析します。 bb06e69d307cb52103d07d8f9dd385e5 がない場合、それぞれが独自の読み込み、エラー報告、完了ステータスを処理する必要があります。最悪のシナリオでは、ページ上に 3 つのローテーション読み込み状態が表示され、コンテンツが異なるタイミングで表示される可能性があります。

bb06e69d307cb52103d07d8f9dd385e5 コンポーネントを使用すると、マルチレベル コンポーネント ツリー全体で各非同期依存関係の結果を待ちながら、最上位にロードまたは失敗したロードのステータスを表示できます。 。 州。

簡単な例を見てみましょう:

最初に非同期コンポーネントを導入する必要があります

import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))

もっと単純化するには、コンポーネントを使用して非同期読み込みの効果を実現できます

ホーム親コンポーネントのコードは次のとおりです:

<template>
  <div class="home">
    <h4>我是Home组件</h4>
    <Suspense>
       <template #default>
        <Child />
      </template>
      <template v-slot:fallback>
        <h4>Loading...</h4>
      </template>
    </Suspense>
  </div>
</template>
 
<script >
// import Child from &#39;./components/Child&#39;//静态引入
import { defineAsyncComponent  } from "vue";
const Child = defineAsyncComponent(() => import("../components/Child"));
export default {
  name: "",
  components: { Child },
};
</script>
 
<style>
.home {
  width: 300px;
  background-color: gray;
  padding: 10px;
}
</style>

自己コンポーネントの子

<template>
  <div class="child">
    <h4>我是Child组件</h4>
    name: {{user.name}}
    age: {{user.age}}
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  name: "Child",
  async setup() {
    const NanUser = () => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({
            name: "NanChen",
            age: 20,
          });
        },2000);
      });
    };
    const user = await NanUser();
    return {
      user,
    };
  },
};
</script>

<style>
.child {
  background-color: skyblue;
  padding: 10px;
}
</style>

スロットの仕組みに従ってコンポーネントが区別されます。 # スロット内のコンテンツは、レンダリングする必要がある非同期コンポーネントです。#fallback は、指定した読み込み静的コンポーネントです。

効果は次のとおりです:

以上がVue3非同期コンポーネントSuspenseの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。