Vue.jsで遅延読み込みウィザードを作成する

getdocs

2年前

ウィザードは、いくつかのステップで構成されるコンポーネントです。各ステップは異なるビューです。 Vue.jsにパーツをレイジーロードするウィザードを作成する方法を見てみましょう。

🧙ウィザードの手順

ウィザードの各ステップは、ウィザードが表示している画面の1つです。ステップごとに1つのコンポーネントを作成し、 Wizard-step1.vue 、 Wizard-step2.vue 、Wizard-step3.vueなどの同じ命名パターンを使用して名前を付けましょう。。たとえば、簡単なコンテンツをそこに入れるだけです。

ウィザード-step1.vue

<template>
  <div>
    Step 1
  </div>
</template>

魔法使い

これは魔法が起こるコンポーネントです。ウィザードには step 遅延読み込みに使用するカウンターと、そのカウンターを増やすボタン。それを成し遂げましょう：

Wizard.vue

<template>
  <div>
    <button @click="next">Next</button>
  </div>
</template>

<script>
export default {
  data: () => ({ step: 1 }),
  methods: {
    next() {
      this.step++;
    }
  }
};
</script>

ウィザードは、現在のステップに応じて対応するコンポーネントをロードするという考え方です。遅延読み込みの場合、動的インポートを使用できますが、これは非同期であり、コンポーネントのレンダリングが同期している間、promiseを返します。

Vueは、私たちの目的に使用できる可能性のあるいくつかの機能を提供します。

非同期コンポーネント：オブジェクトの代わりに関数（promiseを返す）を渡すと、少なくともローカルおよびグローバル登録を使用する場合に、コンポーネントを非同期で遅延ロードできます。問題は、これらのコンポーネントが事前にわかっていることですが、この例ではそうではありません。
動的コンポーネント： <component> 予約済みの要素であるため、コンポーネントを動的にホットスワップできます。ただし、同じ問題があります。これらのコンポーネントを事前に知っておく必要があります。

宝物は次のとおりです。Vue.jsのドキュメントには記載されていませんが、動的インポートと組み合わせた計算プロパティを使用して、両方の機能の機能を組み合わせることができます。これは、要素によって、内部でpromiseを返す関数を取得できるためです。一種のローカル登録を実行します。

動的インポートは、requireがNode.jsで機能するのと同様に、実行時にモジュールをロードできるJavaScript機能です。 WebpackやRollupなどの一部のモジュールバンドラーは、動的インポートをコード分割ポイントとして使用し、別のバンドルを作成して、そのコードに到達したときにオンデマンドでロードします。

その部分をコンポーネントに追加しましょう：

Wizard.vue

<template>
  <div>
    <button @click="next">Next</button>
    <component :is="stepComponent"/>
  </div>
</template>

<script>
export default {
  data: () => ({ step: 1 }),
  computed: {
    stepComponent() {
      return () => import(`./Wizard-step${this.step}.vue`);
    }
  },
  methods: {
    next() {
      this.step++;
    }
  }
};
</script>

私は作成しています stepComponent 計算されたプロパティ。現在のステップが指定された場合に適切なコンポーネントをロードする関数を返します。次に、上記では、 <component> 要素とそれをバインドする stepComponent.

試してみるとうまくいくはずです。ただし、次へボタンをクリックしても更新されません。これは、計算されたプロパティ内のリアクティブプロパティを評価していないためです。 step 返された関数内にあります。 Vueで計算されたプロパティはキャッシュされ、この場合は最新の値を返します。

代わりに、キャッシュされていないメソッドを使用することもできますが、最終的には無限のレンダリングループになります（自分で試してください）。

回避策は、Vueに評価させることです。 step 状態プロパティ。そのために、私たちはそれを単に呼ぶことができます：

Wizard.vue

stepComponent() {
  this.step; // Just call it
  return () => import(`./Wizard-step${this.step}.vue`);
}

もう一度試して、ブラウザdevtoolsのネットワークタブを開き、次のボタンを押したときにチャンクがどのように読み込まれるかを見て楽しんでください。 ✨