・Vue.jsのKeepAliveの使い方は？
こんな疑問にお答えします。
動的コンポーネントにて切り替わるとき、アンマウントされます。
つまりそのコンポーネント内の内容は保持されず、消えてしまう。
ただ場合によっては動的に切り替えても、内容を保持したいときがありますよね。
実はそんなときに使えるのが「KeepAlive」です。
今回は自分用のメモとして「KeepAlive」についてまとめてみました！
参考にどうぞ
ということで、この記事では「Vue.jsのKeepAliveの使い方」について解説していきます！
・Vue.jsのKeepAliveの基本的な使い方
・Vue.jsのKeepAliveのInclue／Exclude／maxの使い方
・Vue.jsのKeepAliveのライフサイクルフック
【最新】Vue.jsの入門にオススメの本【３選】 
【最新】Vue.jsの入門にオススメのUdemy教材【３選】 目次
【解説】Vue.jsのKeepAliveの基本的な使い方
実際に「KeepAlive」を使って、動的に切り替えても内容が保持されるサンプルコードがこちら。
<script setup lang="ts">
import TestVue01 from './components/TestVue01.vue';
import TestVue02 from './components/TestVue02.vue';
import TestVue03 from './components/TestVue03.vue';
import { shallowRef } from 'vue';
const TestComponent = shallowRef(TestVue01)
</script>
<template>
<button @click="TestComponent = TestVue01">01</button>
<button @click="TestComponent = TestVue02">02</button>
<button @click="TestComponent = TestVue03">03</button>
<KeepAlive>
<component :is="TestComponent"/>
</KeepAlive>
</template><script setup>
import { ref } from 'vue';
const count = ref(0)
</script>
<template>
<p>コンポーネント の数値</p>
<p>{{ count }}</p>
<button @click="count++">カウントボタン</button>
</template>クリックしてカウント数値を上げてから、コンポーネントを切り替えると数値が上がった状態のままキープされます。
コードの中で重要な点がこちら↓
①：動的コンポーネントを実装
②：「KeepAlive」タグで囲む
順に解説してきます。
まず通常通り「component」タグを用いて、動的コンポーネントを実装します。
<template>
<button @click="TestComponent = TestVue01">01</button>
<button @click="TestComponent = TestVue02">02</button>
<button @click="TestComponent = TestVue03">03</button>
<component :is="TestComponent"/>
</template>詳しい実装方法は下記記事で解説しているので参考に↓
【解説】Vue.jsの動的コンポーネントの使い方【component／:is】 あとは「component」タグを「KeepAlive」タグで囲めば実装完了です。
<KeepAlive>
<component :is="TestComponent"/>
</KeepAlive>これだけで動的に切り替えても内容を保持してくれます。
【解説】Vue.jsのKeepAliveの特定的な使い方【Inclue／Exclude／max】
「KeepAlive」で囲むと、その中のコンポーネントはすべて保持されます。
ただ場合によっては「TestVue01.vueというコンポーネントだけ保持させたい」という特定的な使い方をしたいかと。
実はある属性をつければ可能です。
それがこちら。
・Inclue
・Exclude
・max
順に解説してきます。
Inclue属性を使えば、「〇〇コンポーネントのみ保持する」という使い方が可能です。
書き方はKeepAliveタグに対して「include=”拡張子無しのファイル名”」となります。
<!-- TestVue01コンポーネントだけ内容を保持 -->
<KeepAlive include="TestVue01">
<component :is="TestComponent"/>
</KeepAlive>
<!-- 複数指定も可能 -->
<KeepAlive include="TestVue01,TestVue02">
<component :is="TestComponent"/>
</KeepAlive>
<!-- :でバインドを使えば配列で指定可能 -->
<KeepAlive :include="['TestVue01', 'TestVue02']">
<component :is="TestComponent"/>
</KeepAlive>ここで指定したコンポーネントだけ保持されます。
Exclude属性を使えば、「〇〇コンポーネントのみ保持しない」という使い方が可能です。
書き方はKeepAliveタグに対して「exclude=”拡張子無しのファイル名”」となります。
<!-- TestVue01コンポーネントだけ内容が保持されない -->
<KeepAlive exclude="TestVue01">
<component :is="TestComponent"/>
</KeepAlive>
<!-- 複数指定も可能 -->
<KeepAlive exclude="TestVue01,TestVue02">
<component :is="TestComponent"/>
</KeepAlive>
<!-- :でバインドを使えば配列で指定可能 -->
<KeepAlive :exclude="['TestVue01', 'TestVue02']">
<component :is="TestComponent"/>
</KeepAlive>ここで指定したコンポーネントのみ、保持されなくなります。
max属性を使えば、「直近◯つまでのコンポーネントを保持する」という使い方が可能です。
書き方はKeepAliveタグに対して「max=”数値”」となります。
<!-- 文字列で指定 直近２つのコンポーネントを保持 -->
<KeepAlive max="2">
<component :is="TestComponent"/>
</KeepAlive>
<!-- バインドで数値指定 直近２つのコンポーネントを保持 -->
<KeepAlive :max="2">
<component :is="TestComponent"/>
</KeepAlive>【解説】Vue.jsのKeepAliveのライフサイクルフック
KeepAliveを使うと内容が保持されるので、アンマウントされなくなります。
つまり「onUnmounted」のライフサイクルフックが使えないといことです。
【解説】Vue.jsのライフサイクルフックの使い方【Compsition API】 ただ場合によっては保持しつつも、切り替え表示・非表示時に何かしら動作させたいときがあるかと。
実はそんなときに使える「KeepAlive」を使用時のライフサイクルフックが2つあるんですよね！
①：「onActivated」
②：「onDeactivated」
順に見ていきましょう。
KeepAlive利用時「onActivated」を使えば、コンポーネントが表示されたときに検知して実行されます。
書き方はこちら。
<script setup>
import { onActivated } from 'vue';
onActivated(() => {
console.log('onActivatedが実行')
})
</script>KeepAlive利用時「onDeactivated」を使えば、コンポーネントが非表示されたときに検知して実行されます。
書き方はこちら。
<script setup>
import { onDeactivated } from 'vue';
onDeactivated(() => {
console.log('onDeactivatedが実行')
})
</script>【解説】Vue.jsのKeepAliveの使い方【Inclue／Exclude／max】：まとめ
- 「KeepAlive」タグで囲めばコンポーネントの内容が保持される
- 「Inclue／Exclude／max」を使えば特定的に保持できる
- 「KeepAlive」用のライフサイクルフックがある
Vue.jsでKeepAliveを使う時はためしてみてね！
