beforeUpdate dan afterUpdate
Hubungkan kode ke siklus pembaruan untuk memeriksa atau mengubah DOM sebelum dan sesudah perubahan reaktif.
beforeUpdate dan afterUpdate adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 3 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 Sveltejs Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Kapan Keduanya Berjalan
beforeUpdate dijalankan sebelum pembaruan reaktif diterapkan ke DOM; afterUpdate dijalankan tepat setelahnya.
Kasus Penggunaan
Gunakan keduanya untuk membaca pengukuran DOM sebelum perubahan dan menyesuaikan posisi gulir setelahnya.
Pengguliran Otomatis pada Obrolan
Penggunaan klasiknya adalah menggulir obrolan secara otomatis ke bagian bawah hanya jika pengguna memang sudah berada di bagian bawah.
let div, autoscroll;
beforeUpdate(() => {
autoscroll = div && (div.scrollTop + div.offsetHeight >= div.scrollHeight - 20);
});
afterUpdate(() => {
if (autoscroll) div.scrollTo(0, div.scrollHeight);
});Sering Dijalankan
Panggilan balik ini dijalankan pada setiap pembaruan. Buatlah secepat mungkin.
Perilaku di Server
Keduanya tidak dijalankan selama SSR. Perlakukan keduanya sebagai fitur khusus browser.
Pasangkan dengan Hati-Hati
Status yang disimpan di beforeUpdate dapat diterapkan di afterUpdate untuk pola pengukuran dan penerapan.
Hindari untuk Sebagian Besar Logika
Sebagian besar logika sebaiknya berada dalam pernyataan reaktif atau tindakan. Gunakan ini hanya untuk pengukuran DOM.
Urutan Eksekusi
Urutan pada setiap pembaruan: pernyataan reaktif -> beforeUpdate -> patch DOM -> afterUpdate.
Pemasangan Pertama
Keduanya dijalankan pada pemasangan pertama selain pada pembaruan berikutnya. Perhitungkan eksekusi awal ini.
Gabungkan dengan bind:this
Anda memerlukan referensi ke elemen DOM untuk melakukan pengukuran. Gunakan bind:this.
Alternatif tick
Untuk pengukuran satu kali setelah perubahan, await tick() dapat lebih mudah dibaca.
Pemeriksaan Singkat
Kapan afterUpdate dijalankan?
Ringkasan
beforeUpdate menangkap status sebelum perubahan; afterUpdate membaca atau mengubah DOM yang baru diperbarui.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “beforeUpdate dan afterUpdate” gratis?
Ya — teks lengkap “beforeUpdate dan afterUpdate” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Sveltejs Academy, upgrade ke CoddyKit PRO. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “beforeUpdate dan afterUpdate”?
Hubungkan kode ke siklus pembaruan untuk memeriksa atau mengubah DOM sebelum dan sesudah perubahan reaktif. Kamu berlatih Sveltejs 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 Sveltejs Academy?
Tidak diperlukan pengalaman sebelumnya. Sveltejs 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 3 dari 4.
Berapa lama pelajaran “beforeUpdate dan afterUpdate” 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 Sveltejs Academy ini?
Ya. Setiap pelajaran Sveltejs 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
- onMount: Menjalankan Kode Setelah Render
- onDestroy: Pembersihan
- beforeUpdate dan afterUpdate
- tick(): Menunggu Pembaruan DOM