Vue 開発におけるコンポーネントの非同期読み込みの問題を解決する方法-PHPチュートリアル-php.cn

Vue 開発におけるコンポーネントの非同期読み込みの問題を解決する方法

WBOY

リリース： 2023-06-29 09:08:01

オリジナル

2821 人が閲覧しました

プロジェクト開発に Vue を使用すると、コンポーネントを非同期でロードする必要がある状況に遭遇することがあります。たとえば、場合によっては、特定のルートでコンポーネントをロードするだけでよい場合や、ユーザーが特定のアクションを実行した後にのみコンポーネントをロードする必要がある場合があります。この記事では、コンポーネントの非同期読み込みを解決するいくつかの方法を紹介します。

Vue の非同期コンポーネント読み込みメソッドの使用
Vue は、コンポーネントを使用する必要があるときに読み込むことができる、コンポーネントを非同期に読み込む方法を提供します。 Vue の import() 構文を使用して、非同期読み込みを実装できます。例:
```
const MyComponent = () => import('./MyComponent.vue')
```
ログイン後にコピー
この方法では、MyComponent## を使用する必要がある場合にのみ非同期読み込みが発生します。＃成分。。ルーティングでコンポーネントの非同期ロードを使用する方法は次のとおりです。
```
const router = new VueRouter({
  routes: [
 {
   path: '/home',
   component: () => import('./Home.vue')
 }
  ]
})
```
ログイン後にコピー
この方法では、ユーザーが
/home## にアクセスすると、Home コンポーネントが非同期でロードされます。＃パス。
Vue の遅延読み込みメソッドは、コンポーネントの非同期読み込みを実装するもう 1 つの方法です。遅延読み込みとは、必要なときにコンポーネントを読み込むことを意味します。
@babel/plugin-syntax-dynamic-import
プラグインを使用して、遅延読み込みをサポートできます。例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>const MyComponent = () => import(/* webpackChunkName: "my-component" */ './MyComponent.vue')</pre><div class="contentsignin">ログイン後にコピー</div></div>このように、## を使用する必要がある場合は、 #MyComponent
コンポーネント、非同期でロードされます。ルーティングで遅延読み込みを使用する方法は次のとおりです。
```
const router = new VueRouter({
  routes: [
 {
   path: '/home',
   component: () => import(/* webpackChunkName: "home" */ './Home.vue')
 }
  ]
})
```
ログイン後にコピー
Vue の遅延読み込みメソッドを使用すると、コンポーネントの読み込みタイミングをより詳細に制御できます。
Vue の遷移コンポーネントを使用して非同期読み込みを行う
コンポーネントを使用して、非同期に読み込まれたコンポーネントをラップし、読み込みが完了した後にコンポーネントを表示できます。たとえば、
```
<transition>
  <keep-alive>
 <component :is="currentComponent"></component>
  </keep-alive>
</transition>
```
ログイン後にコピー
は data# で定義されています。 Vue の ## オプション currentComponent
変数、非同期ロードが必要なコンポーネントに応じてこの変数を切り替えることでコンポーネントの動的なロードを実現できます。概要:
Vue 開発では、コンポーネントを非同期的に読み込むことで、必要に応じてコンポーネントを動的に読み込むことができます。 Vue の非同期コンポーネント読み込みメソッド、遅延読み込みメソッド、および遷移コンポーネントを使用して、コンポーネントの非同期読み込み機能を実現できます。適切なアプローチを選択すると、アプリケーションのパフォーマンスとユーザーエクスペリエンスが向上します。