Vue の非同期コンポーネントと動的コンポーネントの違いは何ですか

違い: 1. 動的コンポーネントは、Vue の特別な Html 要素「」です。特別な is 属性があります。属性値は、「登録されたコンポーネントの名前」または「コンポーネント」です。 「オプション オブジェクト」; 非同期コンポーネントは物理オブジェクトではなく、コンポーネントを非同期にロードするための概念、つまり方法です。 2. 動的コンポーネントは、異なるコンポーネント間の動的な切り替えに使用され、非同期コンポーネントは、最初の画面の読み込み時間や読み込みリソース サイズの削減など、パフォーマンスの最適化に使用されます。

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

非同期コンポーネント

一部の大規模な Vue アプリケーションでは、コード抽出であろうと論理分割であろうと、アプリケーションは必然的にいくつかの小さなブロックに分割されます。コードは私たちの意識の中でコンポーネントを形成します。必要に応じて

import を導入できます。例:

    import MyComponent from '../components/my-component.vue'

    new Vue({
        // ...
        components: {MyComponent}
    })

このように導入されます。

MyComponent 構築プロセス中に、ページの Bundle.js に同期されます

現時点では、次のようなシナリオがあります:

1. このコンポーネントのサイズは非常に大きい Big

2. ページの最初からは必要ありません

次に、構築プロセス中に、コンポーネント コードをページ js に入力します。は不適切です

Vue は

非同期コンポーネント の概念を提供します: 必要な場合にのみサーバーからロードされます

次のように定義できます:

    Vue.component('async-example', function (resolve, reject) {
        setTimeout(function () {
            // 向 `resolve` 回调传递组件定义
            resolve({
                template: '<div>I am async!</div>'
            })
        }, 1000)
    })

上の例では、

setTimeout を使用してコンポーネントの非同期取得をシミュレートしています。実際の状況では、コンポーネントのコンパイル後に Ajax 経由でテンプレートをリクエストし、読み込みが失敗した場合は resolve メソッドを呼び出すこともできます。 , reject メソッドを呼び出すことができます。

ほとんどの場合、コンポーネントは

.vue ファイルに分割されているため、これを行うことができます:

    Vue.component('async-webpack-example', function (resolve) {
        require(['./my-async-component'], resolve)
    })

この特別な

require 構文は、ビルド コードを複数のパッケージに自動的に分割するように webpack に指示します。これらのパッケージは、Ajax リクエストを通じてロードされます。

したがって、ページがこのコンポーネントを使用するときに、そうでない場合は、コンポーネントの js パッケージをリクエストすることは当然ありません

もちろん、非同期コンポーネントをローカルに登録することもできます

    new Vue({
    // ...
        components: {
            'my-component': () => import('./my-async-component')
        }
    })

動的コンポーネント

非同期コンポーネントというと、多くの人は別の同様の

動的コンポーネント を思い浮かべ、この 2 つの関係を常に混同します。

実際、

動的コンポーネントと非同期コンポーネントはまったく異なります。 ！ ！

概要に直接移動

動的コンポーネント: これは、Vue の特別な Html 要素です: 、特別な is 属性があり、属性値は 登録されたコンポーネントの名前 または コンポーネントのオプション オブジェクト の間で使用されます。異なるコンポーネント 動的切り替えを実行します。

非同期コンポーネント: 簡単に言うと、これはコンポーネントを非同期的に読み込むための概念であり、通常、最初の画面の読み込み時間や読み込みリソース サイズの削減など、パフォーマンスの最適化に使用されます。 。

(学習ビデオ共有:

Web フロントエンドの概要 、vue ビデオ チュートリアル )

以上がVue の非同期コンポーネントと動的コンポーネントの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。