動的コンポーネントと非同期コンポーネント

このページは、コンポーネントの基本を読んでいることを前提としています。コンポーネントについてまだよく知らない場合は、最初に読むことをお勧めします。

#目次

キープオンダイナミックの使用コンポーネントは生きています
#非同期コンポーネント

#動的コンポーネントで

keep-alive を使用

以前、is 属性を使用して、マルチタブインターフェイスでさまざまなコンポーネントを切り替えました。

<component v-bind:is="currentTabComponent"></component>

これらのコンポーネント間を切り替えるとき、これらのコンポーネントの状態を維持したい場合があります。コンポーネントを使用して、繰り返しの再レンダリングによって引き起こされるパフォーマンスの問題を回避します。たとえば、このマルチタブインターフェイスを拡張してみましょう。

記事を選択すると、

Archive タグに切り替わり、その後、

投稿

に戻ると、前に選択した記事は引き続き表示されません。これは、新しいタブに切り替えるたびに、Vue が新しい currentTabComponent インスタンスを作成するためです。動的コンポーネントの動作を再作成することは多くの場合非常に役立ちますが、この場合は、それらのタグのコンポーネントインスタンスを最初に作成したときにキャッシュすることをお勧めします。この問題を解決するには、動的コンポーネントを <keep-alive> 要素でラップします。

<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

変更された結果を見てみましょう:

投稿タグは、そうでない場合でもそのステータス (選択された投稿) を保持します。同様のことが起こります。レンダリング用。完全なコードは、

このフィドルで確認できます。

この <keep-alive>

では、コンポーネントの

name
オプションまたはローカルで、切り替え先のコンポーネントに独自の名前が必要であることに注意してください。グローバル登録。 <keep-alive>
の詳細については、

API リファレンスドキュメント

で確認できます。

非同期コンポーネント

#大規模なアプリケーションでは、アプリケーションを小さなコードブロックに分割し、必要な場合にのみ使用する必要がある場合があります。サーバーからのモジュール。簡略化すると、Vue ではコンポーネントをファクトリ関数として定義でき、これによりコンポーネント定義が非同期的に解析されます。 Vue は、コンポーネントをレンダリングする必要がある場合にのみファクトリ関数をトリガーし、将来の再レンダリングに備えて結果をキャッシュします。例:

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

ご覧のとおり、このファクトリ関数は resolve コールバックを受け取ります。このコールバックは、サーバーからコンポーネント定義を取得するときに呼び出されます。 reject(reason) を呼び出して、読み込みの失敗を示すこともできます。 setTimeout ここはデモ用です。コンポーネントの入手方法はあなた次第です。推奨されるアプローチは、webpack のコード分割機能で非同期コンポーネントを使用することです。

Vue.component('async-webpack-example', function (resolve) {
  // 这个特殊的 `require` 语法将会告诉 webpack
  // 自动将你的构建代码切割成多个包，这些包
  // 会通过 Ajax 请求加载
  require(['./my-async-component'], resolve)
})

ファクトリ関数で Promise を返すこともできるため、webpack 2 とES2015 構文を組み合わせると、次のように記述できます:

Vue.component(
  'async-webpack-example',
  // 这个 `import` 函数会返回一个 `Promise` 对象。
  () => import('./my-async-component')
)

ローカル登録を使用する場合、戻り値 Promise 関数を直接提供することもできます:

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

非同期コンポーネントの使用も好む Browserify ユーザーの場合、残念なことに、このツールの作成者は、非同期読み込みは「Browserify ではサポートされない」と明確に述べています。少なくとも公式ではありません。 Browserify コミュニティは、既存の複雑なアプリケーションに役立つ可能性のあるいくつかの回避策を発見しました。他のシナリオでは、Webpack を直接使用して、ファーストクラスの非同期サポートを組み込むことをお勧めします。

#読み込みステータスの処理

2.3.0 New

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

const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./MyComponent.vue'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
})

注: を使用したい場合は、 Vue Router のルーティングコンポーネントで上記の構文を使用する場合は、Vue Router 2.4.0 バージョンを使用する必要があります。

動的コンポーネントと非同期コンポーネント

以前、is 属性を使用して、マルチタブ インターフェイスでさまざまなコンポーネントを切り替えました。

非同期コンポーネント

PHP中国語ウェブサイト

以前、is 属性を使用して、マルチタブインターフェイスでさまざまなコンポーネントを切り替えました。