VUE3 開発の基本: 非同期コンポーネントの使用に関するチュートリアル

Vue 3 は Vue.js の最新メジャー バージョンで、Vue 2 と比較して多くの新機能と改善点が追加されています。最も顕著な改善点の 1 つは、非同期コンポーネントの使用です。この記事では、Vue 3 の非同期コンポーネントの使用法とテクニックについて詳しく説明します。

非同期コンポーネントとは何ですか?

Vue では、import ステートメントまたは require 関数を通じてコン​​ポーネントを導入できます。これらのコンポーネントは同期コンポーネントと呼ばれ、そのコードはアプリケーションの起動時にすぐにロードされてコンパイルされます。ただし、アプリが大きくなるにつれて、同期的に読み込まれるコンポーネントにより、最初の画面の読み込み時間が長くなり、大量のメモリと帯域幅を消費することもあります。

この問題を解決するために、Vue 3 は非同期コンポーネントの概念を提供します。非同期コンポーネントは、必要に応じてロードされ、コンパイルされるコンポーネントです。これは、アプリケーションが特定のコンポーネントをロードする必要がある場合、これらのコンポーネントをサーバーから非同期に要求し、応答が返された後にそれらを動的にロードしてコンパイルすることを意味します。これにより、最初の画面の読み込み時間が大幅に短縮され、アプリケーションのメモリ フットプリントと帯域幅の消費量が削減されます。

非同期コンポーネントの使用方法?

Vue 3 では、非同期コンポーネントは次の方法で定義できます:

const AsyncComponent = defineAsyncComponent(async () => {
  // 异步加载和编译组件的代码
  const module = await import("@/components/AsyncComponent.vue")
  return module.default
})

上記のコードは、AsyncComponent という名前のコンポーネントを定義します。 の非同期コンポーネント。非同期コンポーネントを定義する方法は、同期コンポーネントの場合と似ていますが、非同期コンポーネントでは defineComponent 関数の代わりに defineAsyncComponent 関数を使用する必要がある点が異なります。

非同期コンポーネントの定義では、async および await キーワードを使用して、コンポーネントのコードを非同期的にロードしてコンパイルします。この例では、import ステートメントを使用して、@/components/AsyncComponent.vue ファイルからコンポーネントをロードし、そのデフォルトのエクスポートを返します。非同期コンポーネントの定義では、Vue インスタンスやコンポーネントのオプションではなく、コンポーネントのデフォルトのエクスポートを返すだけでよいことに注意してください。

非同期コンポーネントを定義したら、それを親コンポーネントで使用できます。たとえば、上記で定義した非同期コンポーネントを App.vue コンポーネントで使用したい場合は、次のように実行できます。

<template>
  <div>
    <h1 id="异步组件">异步组件</h1>
    <AsyncComponent />
  </div>
</template>

<script>
import { defineAsyncComponent } from "vue"
const AsyncComponent = defineAsyncComponent(async () => {
  const module = await import("@/components/AsyncComponent.vue")
  return module.default
})

export default {
  components: {
    AsyncComponent
  }
}
</script>

上記のコードの components オプション 非同期コンポーネント AsyncComponent が登録されます。次に、テンプレート内の <asynccomponent></asynccomponent> タグを使用して、非同期コンポーネントを表示します。

親コンポーネントがレンダリングされると、Vue 3 は <asynccomponent></asynccomponent> タグを検出し、定義した非同期コンポーネントをサーバーに非同期的にリクエストします。非同期応答が返されると、Vue はコンポーネントを動的にロードしてコンパイルし、ページに表示します。

上記の方法に加えて、Vue 3 が提供する defineAsyncComponent 関数を使用して非同期コンポーネントを定義する他の方法も使用できます。たとえば、動的インポートと defineAsyncComponent 関数を組み合わせて使用​​して、非同期コンポーネントを定義できます:

const AsyncComponent = defineAsyncComponent(() => import("@/components/AsyncComponent.vue"))

また、従来の Promise 構文を使用して非同期コンポーネントを定義することもできます:

const AsyncComponent = defineAsyncComponent(() =>
  new Promise(resolve => {
    setTimeout(() => {
      import("@/components/AsyncComponent.vue").then(module => {
        resolve(module.default)
      })
    }, 1000)
  })
)

上記のコードでは、1 秒の遅延を持つ Promise を使用して、コンポーネントの非同期読み込みとコンパイルをシミュレートします。

結論

非同期コンポーネントは、Vue 3 の強力で便利な機能です。非同期コンポーネントを使用すると、アプリケーションのパフォーマンスとユーザー エクスペリエンスを大幅に向上させることができます。この記事では、Vue 3 の非同期コンポーネントの使用法とテクニックについて詳しく説明します。この記事が Vue 3 の非同期コンポーネントの理解と使用に役立つことを願っています。

以上がVUE3 開発の基本: 非同期コンポーネントの使用に関するチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。