#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。違い: 1. 動的コンポーネントは、Vue の特別な Html 要素「
」です。特別な is 属性があります。属性値は、「登録されたコンポーネントの名前」または「コンポーネント」です。 「オプション オブジェクト」; 非同期コンポーネントは物理オブジェクトではなく、コンポーネントを非同期にロードするための概念、つまり方法です。 2. 動的コンポーネントは、異なるコンポーネント間の動的な切り替えに使用され、非同期コンポーネントは、最初の画面の読み込み時間や読み込みリソース サイズの削減など、パフォーマンスの最適化に使用されます。
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 リクエストを通じてロードされます。
new Vue({ // ... components: { 'my-component': () => import('./my-async-component') } })
動的コンポーネント を思い浮かべ、この 2 つの関係を常に混同します。
動的コンポーネントと
非同期コンポーネントはまったく異なります。 ! !
動的コンポーネント: これは、Vue の特別な Html 要素です:
、特別な
is 属性があり、属性値は
登録されたコンポーネントの名前 または
コンポーネントのオプション オブジェクト の間で使用されます。異なるコンポーネント 動的切り替えを実行します。
非同期コンポーネント: 簡単に言うと、これはコンポーネントを非同期的に読み込むための概念であり、通常、最初の画面の読み込み時間や読み込みリソース サイズの削減など、パフォーマンスの最適化に使用されます。 。
Web フロントエンドの概要 、vue ビデオ チュートリアル )
以上がVue の非同期コンポーネントと動的コンポーネントの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。