onBeforeUnmount() アンマウント前フック
最終更新：2026-10-22
onBeforeUnmount() アンマウント前フック
onBeforeUnmount() はコンポーネントが破棄される直前に呼ばれます。DOM はまだ使える状態なので、タイマー、リスナー、サードパーティインスタンスを手動でクリーンアップする最後のタイミングです。
| グループ | ライフサイクルフック |
|---|---|
| 種類 | API |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
onBeforeUnmount(() => {
clearInterval(timer)
chart.destroy()
})⚙️ 引数
| callback | アンマウント前に実行される関数 |
|---|
戻り値：なし
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
The counter ticks each second and stops after unmount.💡 ポイント
💡 ヒント 手動で確保したリソースはすべてここで対応関係ごと解放します。setInterval↔clearInterval、addEventListener↔removeEventListener、サードパーティインスタンス↔destroy()。
ℹ️ 補足 クリーンアップをコンポーザブルに書く場合は、より汎用的な onScopeDispose の使用を推奨します。
⚠️ 注意 この時点で DOM はまだ存在します。DOM の状態に依存するクリーンアップはこのタイミングで済ませてください。
🏷️ 関連ライフサイクルフック
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q onUnmounted との使い分けは？
A どちらもクリーンアップに使われます。違いは DOM がまだ使えるかどうかで、DOM が必要な処理はこちらに、純粋なロジックは onUnmounted に書きます。
Q クリーンアップしないとどうなりますか？
A タイマーが動き続け、リスナーがインスタンスごとに積み重なり、長期間の利用でメモリリークにつながります。
Q ここでアンマウントを阻止できますか？
A できません。Vue にその仕組みはありません。表示の制御は v-if で行うのが正しい方法です。
