English 中文 العربية 日本語 Português

<KeepAlive> コンポーネントのインスタンスをキャッシュする

最終更新：2026-10-22

<KeepAlive> コンポーネントのインスタンスをキャッシュする

は包んだコンポーネントのインスタンスをキャッシュします。切り替えても状態が残り、再レンダリングもスキップされます（タブやルータービューでよく使われます）。

グループビルトイン
種類コンポーネント・要素
スコープテンプレート
Vue バージョン3.0+
SSR 対応対応

📝 構文

<KeepAlive include="TabA,TabB" :max="10">
  <component :is="currentTab"></component>
</KeepAlive>

⚙️ 引数

propsinclude / exclude（名前または正規表現）/ max（最大キャッシュ数。超えると最も使われていないものから破棄）

▶ 例

以下のコードを編集して結果を確認しましょう：

出力：

Type in tab A, switch away and back — the text remains.
▶ 試してみる

💡 ポイント

💡 ヒント activated / deactivated フックと組み合わせて「再入場時に更新、離脱時に一時停止」を実現します。
ℹ️ 補足 max は LRU 方式で破棄します。上限を超えると最も長くアクセスされていないインスタンスから破棄されます。
⚠️ 注意 キャッシュされるのはインスタンスと状態（タイマーを含む）です。非アクティブなページを長くキャッシュするとメモリを占めるため、max で上限を設定してください。
component onActivated option-activated
関連ケースは近日公開予定。

📚 関連チュートリアル

動的コンポーネントと非同期コンポーネント
レッスン14：動的コンポーネントとキャッシュ

❓ よくある質問

Q v-show との違いは？
A v-show は DOM を隠して残すだけです。KeepAlive はコンポーネントのインスタンス全体（状態と副作用を含む）をキャッシュします。
Q include はどう書きますか？
A カンマ区切りのコンポーネント名か正規表現を指定します（:include="/Tab/" など）。マッチ対象はコンポーネントの name です。
Q キャッシュはずっと残りますか？
A デフォルトでは上限はありません。:max で制御するか、include / exclude のホワイトリストを使ってください。
Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%