Vue Academy · Pelajaran

onUnmounted dan Pola Pembersihan

Menghapus interval, melepas pendengar peristiwa, membatalkan permintaan dalam onUnmounted.

Pelajaran 4 dari 413 langkah

onUnmounted dan Pola Pembersihan adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Melakukan Pembersihan

Saat sebuah komponen dihapus, apa pun yang dimulainya — pengatur waktu, pendengar, langganan, atau permintaan jaringan — akan terus berjalan kecuali Anda menghentikannya. Pengait onUnmounted adalah tempat untuk melakukan pembersihan guna mencegah kebocoran memori dan kesalahan.

Pengait onUnmounted

onUnmounted dipanggil setelah komponen dihapus dari DOM. Inilah kesempatan terakhir untuk melepaskan sumber daya.

<script setup>
import { onUnmounted } from 'vue'
onUnmounted(() => {
  console.log('component removed')
})
</script>

Pola: Menghapus Interval

Jika Anda memulai interval di dalam onMounted, hapus interval tersebut di dalam onUnmounted. Jika tidak, fungsi panggilan balik akan terus berjalan setelah komponen tidak ada, dan sering kali gagal karena status yang diperlukan sudah tidak tersedia.

<script setup>
import { onMounted, onUnmounted } from 'vue'
let id
onMounted(() => { id = setInterval(tick, 1000) })
onUnmounted(() => clearInterval(id))
</script>

Pola: Menghapus Pendengar Peristiwa

Pendengar global pada window atau document tetap ada setelah komponen dihapus. Selalu pasangkan addEventListener dengan removeEventListener.

<script setup>
import { onMounted, onUnmounted } from 'vue'
function onResize() {}
onMounted(() => window.addEventListener('resize', onResize))
onUnmounted(() => window.removeEventListener('resize', onResize))
</script>

Pola: Membatalkan Permintaan Pengambilan Data

Permintaan yang masih tertunda dan selesai setelah pelepasan komponen dapat mengubah status pada komponen yang sudah tidak aktif. Gunakan AbortController untuk membatalkannya selama pembersihan.

<script setup>
import { onMounted, onUnmounted } from 'vue'
const controller = new AbortController()
onMounted(() => {
  fetch('/api/data', { signal: controller.signal })
})
onUnmounted(() => controller.abort())
</script>

Pola: Membatalkan Langganan

Langganan ke penyimpanan, soket, atau bus peristiwa harus dihentikan. Simpan fungsi unsubscribe dan panggil fungsi tersebut di dalam onUnmounted.

<script setup>
import { onMounted, onUnmounted } from 'vue'
let unsubscribe
onMounted(() => { unsubscribe = store.subscribe(handler) })
onUnmounted(() => unsubscribe && unsubscribe())
</script>

watch Mengembalikan Fungsi stop

Memanggil watch mengembalikan fungsi yang menghentikannya. Pemantau yang dibuat selama penyiapan akan berhenti secara otomatis, tetapi pemantau yang dibuat nanti (misalnya, di dalam fungsi panggilan balik lain) harus dihentikan secara manual.

<script setup>
import { watch, onUnmounted } from 'vue'
const stop = watch(source, handler)
onUnmounted(() => stop())
</script>

Fungsi Pembersihan watchEffect

Di dalam watchEffect, Anda menerima fungsi onCleanup untuk melakukan pembersihan sebelum proses berikutnya berjalan atau saat dihentikan. Dengan begitu, sumber daya setiap proses tetap tertata.

watchEffect((onCleanup) => {
  const timer = setTimeout(doWork, 500)
  onCleanup(() => clearTimeout(timer))
})

Mengapa Pembersihan Penting

Melewatkan pembersihan menyebabkan kebocoran memori (sumber daya tidak pernah dibebaskan), pendengar ganda (beberapa pemasangan menumpuk), dan kesalahan (fungsi panggilan balik menyentuh status yang sudah dihancurkan). Kode yang bersih selalu menghentikan apa pun yang dimulainya.

Komposabel Membuatnya Otomatis

Komposabel yang ditulis dengan baik mendaftarkan pembersihannya sendiri di dalam onUnmounted. Itulah sebabnya komposabel VueUse seperti useEventListener menghapus pendengar untuk Anda — pembersihannya sudah tersedia di dalamnya.

Daftar Periksa Pembersihan

setInterval/setTimeout -> hapus.
addEventListener -> hapus pendengarnya.
fetch -> batalkan dengan AbortController.
langganan -> panggil unsubscribe.
pemantau manual -> panggil fungsi stop yang dikembalikan.

Pemeriksaan Singkat

Uji pengetahuan Anda tentang pembersihan.

Jawab di pelajaran interaktif

Ringkasan

Hal-hal penting tentang pembersihan:

onUnmounted berjalan setelah penghapusan — lepaskan sumber daya di sini.
Hapus interval dan batas waktu, hapus pendengar, batalkan pengambilan data, dan batalkan langganan.
watch mengembalikan fungsi stop yang perlu dipanggil di dalam onUnmounted bila diperlukan.
watchEffect menyediakan fungsi panggilan balik onCleanup untuk pembersihan setiap proses.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 42
Pelajaran: 156

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “onUnmounted dan Pola Pembersihan” gratis?

Ya — teks lengkap “onUnmounted dan Pola Pembersihan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “onUnmounted dan Pola Pembersihan”?

Menghapus interval, melepas pendengar peristiwa, membatalkan permintaan dalam onUnmounted. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “onUnmounted dan Pola Pembersihan” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy