onDeactivated() KeepAlive で非アクティブ化されたときに呼ばれる

最終更新：2026-10-22

onDeactivated() は、にキャッシュされたコンポーネントが隠れる（非アクティブ化される）ときに呼ばれます。コンポーネントは破棄されていないので、タイマーの一時停止などに使います。

📝 構文

onDeactivated(() => {
  clearInterval(timer)
})

callback	非アクティブ化されたときに実行される関数

戻り値：なし

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

出力：

Hiding pauses the clock; showing resumes where it stopped.

💡 ヒント onActivated とペアで使います。再開と一時停止の対で、キャッシュされたコンポーネントのライフサイクルが完結します。

⚠️ 注意 非アクティブ化は破棄ではありません。コンポーネントのインスタンスと状態は残っているので、不可逆なクリーンアップは行わないでください。

Q 非アクティブ化後も状態は保持されますか？

A 保持されます。それこそが KeepAlive の目的で、再アクティブ化時には続きから使えます。

Q onUnmounted との違いは？

A onDeactivated は隠れるだけです。onUnmounted は本当に破棄されるとき（キャッシュが取り除かれたとき）にのみ呼ばれます。

Q 何を一時停止するのに向いていますか？

A タイマー、ポーリング、アニメーション、リアルタイム購読など「隠れている間に動かなくてよい」タスクです。

Web-Tutorial 技術チーム

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