Vue3 のdefineAsyncComponent 関数: コンポーネントの非同期ロード

Vue3 は、コンポーネント化のアイデアをフロントエンド開発に取り入れ、開発者が複雑なアプリケーションをより迅速かつ効率的に構築できるようにする、非常に人気のあるフロントエンド フレームワークです。 Vue3 では、コンポーネントを使用してページを構築し、機能を拡張するために多数のサードパーティ コンポーネント ライブラリを使用することがよくあります。ただし、複数のコンポーネントをロードするとアプリケーションの起動が遅くなる可能性があるため、コンポーネントを非同期でロードする必要があります。 Vue3 では、defineAsyncComponent と呼ばれる関数が提供されており、コンポーネントを非同期でロードしてアプリケーションのパフォーマンスを向上させるのに役立ちます。

defineAsyncComponent とは何ですか?

defineAsyncComponent は Vue3 が提供する関数で、コンポーネントを非同期で読み込むために使用されます。この機能により、コンポーネントのインポートと登録を分離し、コンポーネントの非同期ロードを実現できます。この関数は、Promise オブジェクトをパラメーターとして返す関数を受け入れます。関数の戻り値は Vue コンポーネントである必要があります。

defineAsyncComponent の使用

defineAsyncComponent 関数を使用してコンポーネントを非同期的に読み込む方法を見てみましょう。

まず、非同期で読み込まれるコンポーネントを使用する必要がある場合、まずコンポーネントの導入を非同期モードに変更する必要があります。例:

import {defineAsyncComponent} from 'vue';

const AsyncComponent =defineAsyncComponent(() => import('./AsyncComponent.vue'));

export default {
name: 'App',
コンポーネント: {

AsyncComponent

},
}

このうち、defineAsyncComponent 関数は、次の関数を受け入れます。 Promise オブジェクトをパラメーターとして指定すると、Promise オブジェクトのsolve() メソッドは、非同期でロードする必要があるコンポーネントを返します。

AsyncComponent を使用する場合、以前のようにコンポーネント内でこのコンポーネントの登録を完了する必要はなくなりました。非同期コンポーネントを定義したら、他のコンポーネントと同様にテンプレートでそれを使用できるようになります。例:

AsyncComponent を使用する場合のみ、コンポーネントはサーバーからダウンロードされます。それまでは、コンポーネントはダウンロードされません。これにより、特に大規模で複雑なアプリケーションの場合、アプリケーションの起動時間が大幅に短縮されます。

複数の非同期コンポーネントを定義する

複数の非同期コンポーネントを定義する必要がある場合、それらをオブジェクトに格納できます。例:

import {defineAsyncComponent } from 'vue';

const asyncComponents = {
AsyncComponent1:defineAsyncComponent(() => import('./AsyncComponent1.vue') ) ,
AsyncComponent2:defineAsyncComponent(() => import('./AsyncComponent2.vue')),
AsyncComponent3:defineAsyncComponent(() => import('./AsyncComponent3.vue'))
};

デフォルトのエクスポート {
名前: 'App',
コンポーネント: asyncComponents
}

この方法で、これらの非同期コンポーネントをどこでも使用できます。たとえば、テンプレートで使用します。