Vue の動的コンポーネントと非同期コンポーネントの詳細な理解

1. 動的コンポーネント

<!DOCTYPE html>
<html>
<ヘッド>
 <メタ文字セット="utf-8">
 <スタイル>
		＃アプリ {
			フォントサイズ: 0
		}
		.dynamic-component-demo-tab-button {
			パディング: 6px 10px;
			左上の境界線の半径: 3px;
			右上の境界線の半径: 3px;
			境界線: 1px 実線 #ccc;
			カーソル: ポインタ;
			下マージン: -1px;
			右マージン: -1px;
			背景: #f0f0f0;
		}
		.dynamic-component-demo-tab-button.dynamic-component-demo-active {
			背景: #e0e0e0;
		}
		.dynamic-component-demo-tab-button:hover {
			背景: #e0e0e0;
		}
		.dynamic-component-demo-posts-tab {
			ディスプレイ: フレックス;					
		}
		.dynamic-component-demo-tab {
			フォントサイズ: 1rem;
			境界線: 1px 実線 #ccc;
			パディング: 10px;
		}
		.dynamic-component-demo-posts-sidebar {
			最大幅: 40vw;
			マージン: 0 !重要;
			パディング: 0 10px 0 0 !重要;
			リストスタイルタイプ: なし;
			右境界線: 1px 実線 #ccc;
			行の高さ: 1.6em;
		}
		.dynamic-component-demo-posts-sidebar li {
			空白: ラップなし;
			テキストオーバーフロー: 省略記号;
			オーバーフロー: 非表示;
			カーソル: ポインタ;
		}
		.dynamic-component-demo-active {
			背景: 水色;
		}
		.dynamic-component-demo-post-container {
			左パディング: 10px;
		}
		.dynamic-component-demo-post > :first-child {
			上マージン: 0 !重要;
			パディングトップ: 0 !重要;
		}
 </スタイル>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<本文>
<div id="アプリ">
	<button v-for="タブ内のタブ" class="dynamic-component-demo-tab-button" 
		v-bind:class="{'dynamic-component-demo-active': タブ === currentTab}" 
		@click="currentTab = tab">{{ tab }}</button>	
	<キープアライブ>
		<コンポーネント v-bind:is="currentTabComponent"></コンポーネント>
	</キープアライブ>
</div>
<スクリプト>
 Vue.component('タブ投稿', {
		データ: 関数(){
			戻る {
				投稿:
					{id: 1、タイトル: 「Cat Ipsum」、コンテンツ: 「嵐が過ぎ去るのを待ち続けます...」}、
					{id: 2、タイトル: 'ヒップスター イプサム'、コンテンツ: 'ブッシュウィック ブルー ボトル シーンスター ...'}、
					{id: 3、タイトル: 「カップケーキイプサム」、コンテンツ: 「アイシングデザートスフレ...」}、
				]、
				選択された投稿: null
			}
		},
 テンプレート: `<div class="dynamic-component-demo-posts-tab dynamic-component-demo-tab">
						<ul class="ダイナミックコンポーネントデモ投稿サイドバー">
							<li v-for="投稿内の投稿" 
								v-bind:key="post.id" 
								v-on:click="selectedPost = 投稿" 
								v-bind:class="{'dynamic-component-demo-active': post===selectedPost}">
								{{投稿.title}}
							</li>
						</ul>
						<div class="dynamic-component-demo-post-container">
							<div v-if="選択された投稿" クラス="動的コンポーネントデモ投稿">
								<h3>{{ 選択された投稿.タイトル }}</h3>
								<div v-html="選択された投稿.content"></div>
							</div>
							<strong v-else>
								左側のブログタイトルをクリックすると表示されます。
							</strong>
						</div>
					</div>`
 });
	
	Vue.component('タブアーカイブ', {
		テンプレート: '<div class="dynamic-component-demo-tab">アーカイブ コンポーネント</div>'
	});

 新しいVue({
 el: '#app',
		データ： {
			currentTab: '投稿',
			タブ: ['投稿', 'アーカイブ']
		},
		計算: {
			現在のタブコンポーネント: 関数(){
				'tab-' + this.currentTab.toLowerCase() を返す
			}
		}
 });
</スクリプト>
</本文>
</html>

動的コンポーネントでキープアライブを使用すると、コンポーネントが切り替えられたときにコンポーネントの状態を維持できるため、レンダリングの繰り返しによって発生するパフォーマンスの問題を回避できます。

2. 非同期コンポーネント

Vue では、コンポーネントをファクトリ関数として定義することができ、これによりコンポーネント定義が非同期的に解決されます。

Vue.component('async-example', 関数(resolve, deny) {})

ここでは、Vue.js のコンポーネントの基礎を復習できます。

非同期コンポーネントを導入するために、webpack にバンドルされた Vue プロジェクトを使用します。

<!-- HelloWorld.vue -->
<テンプレート>
 <div>
 <h2 class="title">{{メッセージ}}</h2>
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 データ （） {
 戻る {
 メッセージ: 'こんにちは、Vue!'
 }
 }
}
</スクリプト>

<!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します -->
<スタイルスコープ>
 。タイトル {
 パディング: 5px;
 色: 白;
 背景: グレー;
 }
</スタイル>
<!-- App.vue -->
<テンプレート>
 <div id="アプリ">
 <こんにちは世界/>
 </div>
</テンプレート>

<スクリプト>
'./components/HelloWorld' から HelloWorld をインポートします。

エクスポートデフォルト{
 名前: 'アプリ'、
 コンポーネント:
 こんにちは世界
 }
}
</スクリプト>

<スタイル>
</スタイル>

App.vue の <script> タグの内容を次のように変更します。

エクスポートデフォルト{
 名前: 'アプリ'、
 コンポーネント:
 HelloWorld: () => import('./components/HelloWorld')
 }
}

これは、App コンポーネントが HelloWorld コンポーネントを非同期的にロードする機能を実装します。

オンデマンドロードを実現できます。

<!-- App.vue -->
<テンプレート>
 <div id="アプリ">
 <button @click="show = true">ツールチップを読み込む</button>
 <div v-if="表示">
 <こんにちは世界/>
 </div>
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 データ: () => ({
 表示:偽
 }）、
 コンポーネント:
 HelloWorld: () => import('./components/HelloWorld')
 }
}
</スクリプト>

<スタイル>
</スタイル>

ここでの非同期コンポーネントファクトリ関数は、次の形式でオブジェクトを返すこともできます。

const AsyncComponent = () => ({
 // ロードするコンポーネント（`Promise` オブジェクトである必要があります）
 コンポーネント: import('./MyComponent.vue'),
 //非同期コンポーネント読み込み時に使用されるコンポーネント読み込み: LoadingComponent、
 // 読み込み失敗時に使用されるコンポーネント error: ErrorComponent,
 // ロード中のコンポーネントの遅延時間を表示します。デフォルト値は200（ミリ秒）です
 遅延: 200、
 // タイムアウトが指定されていてコンポーネントの読み込みがタイムアウトした場合、
 // 読み込みに失敗した場合に使用したコンポーネントを使用します。デフォルト値は: `Infinity`
 タイムアウト: 3000
})