Vue3非同期コンポーネントSuspenseの使い方-Vue.js-php.cn

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

王林

リリース： 2023-05-14 12:07:06

転載

1707 人が閲覧しました

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

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

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

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

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

ログイン後にコピー

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

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

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

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

import {defineAsyncComponent} from &#39;vue&#39;
const Child = defineAsyncComponent(()=>import(&#39;./components/Child.vue&#39;))

ログイン後にコピー

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

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

<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>

ログイン後にコピー