onUnmountedとクリーンアップパターン
onUnmountedでのインターバルの解除、イベントリスナーの削除、リクエストのキャンセルについて学習します。
「onUnmountedとクリーンアップパターン」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
後片付けを行う
コンポーネントが削除されても、コンポーネントが開始したタイマー、リスナー、サブスクリプション、ネットワークリクエストなどは停止しない限り動作し続けます。onUnmountedフックでクリーンアップを行い、メモリリークやバグを防ぎます。
onUnmountedフック
onUnmountedは、コンポーネントがDOMから削除された後に実行されます。リソースを解放する最後の機会です。
<script setup>
import { onUnmounted } from 'vue'
onUnmounted(() => {
console.log('component removed')
})
</script>パターン：インターバルを解除する
onMountedでインターバルを開始した場合は、onUnmountedで解除します。解除しないと、コンポーネントがなくなった後もコールバックが実行され続け、存在しない状態にアクセスしてクラッシュすることがあります。
<script setup>
import { onMounted, onUnmounted } from 'vue'
let id
onMounted(() => { id = setInterval(tick, 1000) })
onUnmounted(() => clearInterval(id))
</script>パターン：イベントリスナーを削除する
windowやdocumentに登録したグローバルリスナーは、コンポーネントを削除しても残ります。addEventListenerには必ずremoveEventListenerを組み合わせてください。
<script setup>
import { onMounted, onUnmounted } from 'vue'
function onResize() {}
onMounted(() => window.addEventListener('resize', onResize))
onUnmounted(() => window.removeEventListener('resize', onResize))
</script>パターン：fetchリクエストを中止する
アンマウント後に保留中のリクエストが完了すると、破棄されたコンポーネントの状態を更新する可能性があります。AbortControllerを使用し、クリーンアップ時にリクエストをキャンセルしてください。
<script setup>
import { onMounted, onUnmounted } from 'vue'
const controller = new AbortController()
onMounted(() => {
fetch('/api/data', { signal: controller.signal })
})
onUnmounted(() => controller.abort())
</script>パターン：購読を解除する
ストア、ソケット、イベントバスへのサブスクリプションは解除する必要があります。購読解除関数を保存し、onUnmounted内で呼び出してください。
<script setup>
import { onMounted, onUnmounted } from 'vue'
let unsubscribe
onMounted(() => { unsubscribe = store.subscribe(handler) })
onUnmounted(() => unsubscribe && unsubscribe())
</script>watchは停止関数を返す
watchを呼び出すと、それを停止する関数が返されます。セットアップ中に作成されたウォッチャーは自動的に停止しますが、後から作成されたウォッチャー（たとえば別のコールバック内で作成したもの）は手動で停止してください。
<script setup>
import { watch, onUnmounted } from 'vue'
const stop = watch(source, handler)
onUnmounted(() => stop())
</script>watchEffectのクリーンアップコールバック
watchEffect内では、次回の実行前または停止時にクリーンアップするためのonCleanup関数を受け取ります。これにより、実行ごとのリソースを適切に管理できます。
watchEffect((onCleanup) => {
const timer = setTimeout(doWork, 500)
onCleanup(() => clearTimeout(timer))
})クリーンアップが重要な理由
クリーンアップを省略すると、メモリリーク（リソースが解放されない）、重複したリスナー（マウントするたびに積み重なる）、エラー（破棄された状態にコールバックがアクセスする）が発生します。適切なコードでは、設定したものを必ず解除します。
コンポーザブルで自動化する
適切に作られたコンポーザブルは、独自のクリーンアップをonUnmountedに登録します。そのため、useEventListenerのようなVueUseのコンポーザブルはリスナーを自動的に削除してくれます。クリーンアップが組み込まれているためです。
クリーンアップのチェックリスト
setInterval/setTimeout→ 解除します。addEventListener→ 削除します。fetch→ AbortControllerで中止します。- サブスクリプション → 購読解除を呼び出します。
- 手動で作成したウォッチャー → 返された停止関数を呼び出します。
クイックチェック
クリーンアップについての知識を確認しましょう。
まとめ
クリーンアップの要点：
onUnmountedは削除後に実行されます。ここでリソースを解放します。- インターバルやタイムアウトを解除し、リスナーを削除し、fetchを中止し、購読を解除します。
watchは停止関数を返すため、必要に応じてonUnmounted内で呼び出します。watchEffectは、実行ごとのクリーンアップに使うonCleanupコールバックを提供します。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 42
- レッスン
- 156
よくある質問
「onUnmountedとクリーンアップパターン」レッスンは無料ですか？
はい。「onUnmountedとクリーンアップパターン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「onUnmountedとクリーンアップパターン」で何を学びますか？
onUnmountedでのインターバルの解除、イベントリスナーの削除、リクエストのキャンセルについて学習します。 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「onUnmountedとクリーンアップパターン」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ライフサイクルフェーズの概要
- onMountedとonBeforeMount
- onUpdatedとonBeforeUpdate
- onUnmountedとクリーンアップパターン