Vue.jsで遅延読み込みウィザードを作成する
ウィザードは、いくつかのステップで構成されるコンポーネントです。 各ステップは異なるビューです。 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のネットワークタブを開き、次のボタンを押したときにチャンクがどのように読み込まれるかを見て楽しんでください。 ✨