|
4 | 4 |
|
5 | 5 | ## 動的コンポーネントにおける `keep-alive` の利用
|
6 | 6 |
|
7 |
| -まず、`is` 属性を利用してタブインタフェースのコンポーネントを切り替えることができます: |
| 7 | +まず、タブインタフェースにおいてコンポーネントを切り替える `is` 属性を使ったとします: |
8 | 8 |
|
9 | 9 | ```vue-html
|
10 | 10 | <component :is="currentTabComponent"></component>
|
|
14 | 14 |
|
15 | 15 | <common-codepen-snippet title="Dynamic components: without keep-alive" slug="jOPjZOe" tab="html,result" :preview="false" />
|
16 | 16 |
|
17 |
| -投稿を選択し、 _Archive_ タブに切り替えてから _Posts_ に戻ると、選択していた投稿は表示されなくなります。 これは、新しいタブに切り替えるたびに、Vue が `currentTabComponent` の新しいインスタンスを作成するからです。 |
| 17 | +Posts タブの投稿を選択し、 _Archive_ タブに切り替えてから _Posts_ に戻ると、選択していた投稿が表示されないことに気づくでしょう。これは、新しいタブに切り替えるたびに、Vue が `currentTabComponent` の新しいインスタンスを作成するからです。 |
18 | 18 |
|
19 |
| -動的コンポーネントの再生成は通常は便利な挙動です。しかし、このケースでは最初に作成されたタブコンポーネントのインスタンスがキャッシュされるのが好ましいでしょう。この問題を解決するために、動的コンポーネントを `<keep-alive>` 要素でラップすることができます: |
| 19 | +動的コンポーネントの再生成は通常は便利な挙動です。しかし、このケースでは最初に生成されたタブコンポーネントのインスタンスがキャッシュされるのが好ましいでしょう。この問題を解決するためには、動的コンポーネントを `<keep-alive>` 要素で囲みます: |
20 | 20 |
|
21 | 21 | ```vue-html
|
22 | 22 | <!-- アクティブでないコンポーネントはキャッシュされます! -->
|
|
29 | 29 |
|
30 | 30 | <common-codepen-snippet title="Dynamic components: with keep-alive" slug="VwLJQvP" tab="html,result" :preview="false" />
|
31 | 31 |
|
32 |
| -このように _Posts_ タブがレンダリングされていなくても、自身の状態(選択された投稿)を保持するようになります。 |
| 32 | +このように _Posts_ タブがレンダリングされていなくても、自身の状態(選択された投稿)を保持するようになります。 |
33 | 33 |
|
34 | 34 | `<keep-alive>` の詳細な情報については [API リファレンス](../api/built-in-components.html#keep-alive) を参照してください。
|
35 | 35 |
|
36 | 36 | ## 非同期コンポーネント
|
37 | 37 |
|
38 |
| -大規模なアプリケーションでは、アプリケーションを小さなまとまりに分割し、必要なコンポーネントだけサーバーから読み込みたい場合があるでしょう。これを可能にするために、 Vue は `defineAsyncComponent` メソッドを持ちます: |
| 38 | +大規模なアプリケーションでは、アプリケーションを小さなまとまりに分割し、必要なときにだけコンポーネントをサーバーから読み込みたい場合があるでしょう。これを可能にするために、 Vue には `defineAsyncComponent` メソッドがあります: |
39 | 39 |
|
40 | 40 | ```js
|
41 | 41 | const { createApp, defineAsyncComponent } = Vue
|
@@ -68,7 +68,7 @@ const AsyncComp = defineAsyncComponent(() =>
|
68 | 68 | app.component('async-component', AsyncComp)
|
69 | 69 | ```
|
70 | 70 |
|
71 |
| -[コンポーネントのローカル登録](component-registration.html#local-registration) でも、 `defineAsyncComponent` を利用することができます。 |
| 71 | +[コンポーネントのローカル登録](component-registration.html#ローカル登録) でも、 `defineAsyncComponent` を利用できます。 |
72 | 72 |
|
73 | 73 | ```js
|
74 | 74 | import { createApp, defineAsyncComponent } from 'vue'
|
|
0 commit comments