Vue.js 3 非同期処理待ちで使えるsuspense要素

Vue.js 3 非同期処理待ちで使えるsuspense要素

suspense要素とは

vue.jsを使っていて外部サービスからデータを取ってくる時の非同期処理で待ち時間が発生し、表示が遅くなってしまうことがあります。そのようなときにデータが揃うまで待ち受け画像を表示してくれる機能がsuspense要素です。

suspence要素を使ってみる

非同期処理の待ち時間を擬似的に再現するコードを書き、待ち時間が発生しているときは用意した待受要素が表示されるようにする。

表示側

<div id="app">
  <suspense>
    <template #default>  <!-- データ取得後に表示されるtemplate -->
      <my-component />
    </template>
    <template #fallback> <!--  待受用template -->
      データ取得中...
    </template>
  </suspense>
</div>

表示側は2つのスロットを用意する。

default = 本来表示されるべきtemplate

fallback = 非同期処理待ちの時に表示されるtemplate

vue側

Vue.createApp({})
  .component('my-component', {
    template: '<div>非同期処理が終わりました！</div>',
    setup() {
      return new Promise(resolve => {
        setTimeout(()=> {
          resolve();
        }, 5000); {//　ただ5秒待つだけの処理　}
      })
    },
  }).mount('#app')

Vue側の処理では通常通りtemplateを用意します。そして非同期処理をするsetupメソッドを準備しその中でPromiseオブジェクトを返します（実験のため5秒間　待つだけの処理をしています）。これだけで、vueアプリがマウントされた時、#fallbackスロットが表示され、5秒間の処理待ち後、#defaultスロットの配下にあるmy-conponentが表示されます。

suspense機能自体はまだ「実験的」な要素のためこれから変更がかかる可能性があるため本番環境での使用は推奨されていないようですが、便利な機能なため覚えておきたい要素です。