【Vue.js】インスタンスキャッシュ(keep-alive)の使用方法

インスタンスのキャッシュ(keep-alive)は、フォームの入力など状態を残したい場合に使用します。
keep-aliveについて使い方を確認後、ラジオボタンでフォームを切り替えるプログラムを作成していきます。

インスタンスのキャッシュ(keep-alive)について

タブ切り替えなどで見えなくなったフォームの入力情報やスクロールの状態を保持したい場合があります。
その際に役に立つのがkeep-aliveです。
keep-aliveを使用することでキャッシュとして残して置くことが可能になるため、入力情報やスクロールを保持することが可能です。
また、正規表現を使用することでキャッシュするコンポーネントを指定する、キャッシュするコンポーネントの数を指定するといったキャッシュ方法を実現できます。

インスタンスのキャッシュ(keep-alive)の使用方法

インスタンスのキャッシュの使用方法は、templateタグ内で「keep-alive」タグを使用してキャッシュしたいコンポーネントを囲みます。
キャッシュしたいコンポーネントは「v-bind:is」や「v-if」で条件分岐をします。
「keep-alive」は以下のプロパティを持っています。

include

文字列または正規表現または配列を指定することで、一致するコンポーネントのみがキャッシュされます。

exclude

文字列または正規表現または配列を指定することで、一致するコンポーネントはキャッシュされなくなります。

キャッシュするコンポーネントインスタンスの最大値を指定します。最大値に達した場合は、アクセスが古い順に消えていきます。

<template>
  <div>
    <keep-alive :max="数値" :include="正規表現等" exclude="正規表現等">
      <component :is="<算出プロパティなど>"></component>
    </keep-alive>
    <keep-alive>
      <compA v-if="条件"></compA>
      <compB v-else></compB>
    </keep-alive>
  </div>
</template>

インスタンスのキャッシュを使用してみる

ラジオボタンでフォームを切り替えるプログラムをインスタンスのキャッシュを使用して作成していきます。
使用例ではTypeScriptを使用していきます。

プログラム作成

ファイルは三つ準備していきます。

components/YesForm.vue

ラジオボタンが「Yes」になった時にレンダリングされるコンポーネント

components/NoForm.vue

ラジオボタンが「No」になった時にレンダリングされるコンポーネント

Home.vue

「Yes」「No」のラジオボタンとそのラジオボタンによって「YesForm」または「NoFrom」を切り替える

YesForm.vue作成

まずは「YesForm.vue」を作成します。
ラジオボタン切り替え時に「YesForm.vue」が表示されているか、「NoForm.vue」が表示されているかわかればいいので文言とテキスト入力のみです。

<template>
 <div>
   <p>好きな言語を教えてください。</p>
   <input type="text">
 </div>
</template>

NoForm.vue作成

次に「NoForm.vue」を作成します。
こちらもラジオボタン切り替え時に「YesForm.vue」が表示されているか、「NoForm.vue」が表示されているかわかればいいので文言とテキスト入力のみです。

<template>
 <div>
   <p>学びたい言語を教えてください。</p>
   <input type="text">
 </div>
</template>

Home.vue編集

最後に「Home.vue」を編集します。
templateタグ内では、ラジオボタンとインスタンスのキャッシュを使用している動的コンポーネントを準備しました。
scriptタグ内では、動的コンポーネントに使用される算出プロパティを準備しました。

<template>
  <div class="home">
    <p>あなたはプログラミング経験者ですか</p>
    <input type="radio" value="yes" id="yes" v-model="experience">
    <label for="yes">はい</label>
    <input type="radio" value="no" id="no" v-model="experience">
    <label for="no">いいえ</label>
    <keep-alive>
      <component
        :is="formComponent"
      >
      </component>
    </keep-alive>
 </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import YesForm from '@/components/YesForm.vue';
import NoForm from '@/components/NoForm.vue';

@Component({
  components: {
    YesForm,
    NoForm,
  },
})
export default class Home extends Vue {
  private experience: string = 'yes';

  get formComponent() {
    if (this.experience === 'yes') {
      return 'YesForm';
    }

    return 'NoForm';
  }
}
</script>

動作確認

テキストを入力して入力情報が残っている確認していきます。
まずはテキストを入力します。

次にラジオボタンを切り替えてNoFormを表示させます。

そしてラジオボタンを切り替えて再度YesFormを表示させます。

入力したテキストが残っていることが確認できました。
「keep-alive」タグで囲まない場合は、入力したテキストは消えてしまいます。

まとめ

今回はインスタンスのキャッシュを使用してインスタンスの状態保持を行いました。
状態保持が楽になる反面、なんでもキャッシュしてしまうと重くなるのでうまく使用していきましょう。

Vue　APIまとめ

その他のVue(Nuxt)の記事は以下のページにまとめています。
【Vue.js】API一覧