[vue3] SuspenseコンポーネントとdefineAsyncComponentの動的導入の組み合わせ

休日の第5章、基礎知識の点に関しては、まだまだ弱いと感じています。
休みを利用してもう一度見直してみましょう

アプリ内で子コンポーネントを定義します。

//静的導入、ネットワーク速度が遅い場合、親コンポーネントと子コンポーネントも同時にレンダリングされます

<template>
  <div>
    <h3>APP父组件</h3>
    <child />
  </div>
</template>
<script >

 import child from "./components/child";
export default {
    
    
  components: {
    
     child },
};
</script>

//動的 (非同期) 導入では、ネットワーク速度が遅い場合、親コンポーネントが最初にレンダリングされ、次に子コンポーネントがレンダリングされます。

<template>
  <div>
    <h3>APP父组件</h3>
    <child />
  </div>
</template>
<script >

import {
    
     defineAsyncComponent } from "vue";
const child = defineAsyncComponent(() => import("./components/child"));
export default {
    
    
  components: {
    
     child },
};
</script>

違い:
静的​​導入を使用する: ページに複数のコンポーネントがある場合、コンポーネントが導入されるまでページはレンダリングされません。最も遅いコンポーネントは、すべてのコンポーネントがレンダリングされる前に最も遅いコンポーネントがレンダリングされるまで待機するため、ユーザーのエクスペリエンスが非常に遅くなります。非同期導入を使用する: 最も外側のアプリが最初にレンダリングされ、待たずにページに表示されます
。すべてのコンポーネントは、レンダリング後に一緒に表示されます。このレンダリングの欠点は、アプリ ページに戻ったときにページ上の他のコンポーネントがまだレンダリングされていないため、ページ上のすべてが失われたようにユーザーに感じさせることです。他のコンポーネントがレンダリングされると、ジッター効果が発生し、相互作用はあまりフレンドリーではありません。

解決策: サスペンス コンポーネントを使用する サスペンス コンポーネントは vue3 に組み込まれており、参照せずに直接使用できます。サスペンス コンポーネントの最下層もスロットを使用して実装されています。サスペンス コンポーネントには 2 つのスロットがあり、1 つは実際のラップされたコンポーネントを表示するために使用されるデフォルト スロットであり、もう 1 つはフォールバック コンポーネントであり、実際のラップされたコンポーネントを表示するために使用されます。レンダリングされる前のコンポーネントのコンテンツ。つまり、状態をロードするときにプレースホルダーのコンテンツを定義します。

ネットワーク速度が遅い場合は、Suspense コンポーネントを使用するほかに、Promise リアルタイム オブジェクトを使用することもできます。