onUnmounted() アンマウント後フック
最終更新：2026-10-22
onUnmounted() アンマウント後フック
onUnmounted() は、コンポーネントが破棄され、DOM が取り除かれ、すべてのリアクティブな副作用が停止した後に呼ばれます。
| グループ | ライフサイクルフック |
|---|---|
| 種類 | API |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
onUnmounted(() => {
// コンポーネントは完全に破棄済み。外部リソースをクリーンアップ
})⚙️ 引数
| callback | アンマウント後に実行される関数 |
|---|
戻り値：なし
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
Toggling the child off logs 'child unmounted'.💡 ポイント
ℹ️ 補足 コンポーネント自身のウォッチャーや副作用は Vue が自動で停止します。ここではフレームワークが管理しない外部リソースだけを処理します。
⚠️ 注意 この時点で DOM を読むのは信頼できません（すでに取り除かれている可能性があります）。
💡 ヒント 複数インスタンスの場面ではグローバルリスナーを必ず解除してください。破棄済みインスタンスのコールバックが動き続けます。
🏷️ 関連ライフサイクルフック
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q watch を手動で停止する必要はまだありますか？
A 必要ありません。コンポーネント内で作ったエフェクトは破棄時に自動で停止します（切り離されたスコープは除く）。
Q onBeforeUnmount とどう使い分けますか？
A 純粋なロジックのクリーンアップは onUnmounted、DOM を読む必要があるクリーンアップは onBeforeUnmount に書きます。
Q SSR でも実行されますか？
A いいえ。アンマウント系のフックはブラウザ側でのみ実行されます。
