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

d477f9ce7bf77f53fbcf36bec1b69b7a
a73f915f14ced956a8272009e1c240c0
21c97d3a051048b8e55e3c8f199a54b2

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

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

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

import {defineAsyncComponent } from 'vue';

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

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

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

d477f9ce7bf77f53fbcf36bec1b69b7a
746b2b7bc71d2d785eced02a1ba0b3ca
5c945d0b5ab3ac7263437235a5abe396
bcebd5272924e824cf06551468649c9a
a394d787701f854d2b67d49364703bcc

summary

Vue3 の defineAsyncComponent 関数は、コンポーネントをロードする簡単かつ効率的な方法を提供します。これにより、コンポーネントを非同期でロードできるようになり、アプリケーションのパフォーマンスが向上します。コンポーネントの非同期ロードを実現するには、コンポーネントを定義するプロセスをコンポーネントの登録から切り離すだけで済みます。大規模で複雑な Vue アプリケーションの場合、コンポーネントを非同期でロードすることは、アプリケーションのパフォーマンスを大幅に向上させることができる優れた戦略です。

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