onMount: Menjalankan Kode Setelah Render
Jalankan kode setelah komponen ditambahkan ke DOM.
onMount: Menjalankan Kode Setelah Render adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.
Tujuan onMount
onMount dijalankan setelah komponen ditambahkan ke DOM. Cocok untuk memulai pekerjaan asinkron atau mengakses referensi.
Mengimpornya
Impor dari svelte di bagian atas skrip Anda.
<script>
import { onMount } from "svelte";
</script>Penggunaan Dasar
Berikan sebuah fungsi yang dijalankan sekali saat pemasangan.
onMount(() => {
console.log("mounted");
});Operasi Asinkron
Anda dapat menjalankan operasi asinkron di dalamnya atau mengembalikan hasil yang dijanjikan.
onMount(async () => {
data = await fetch("/api").then(r => r.json());
});Mengakses Elemen
Gabungkan dengan bind:this untuk memanipulasi DOM segera setelah pemasangan.
onMount(() => inputEl.focus());Fungsi Pembersihan
Kembalikan sebuah fungsi dari onMount untuk melakukan pembersihan ketika komponen dilepas.
onMount(() => {
const id = setInterval(tick, 1000);
return () => clearInterval(id);
});Server vs Peramban
onMount tidak dijalankan selama SSR. Gunakan untuk kode khusus peramban seperti penyiapan kanvas atau WebGL.
Beberapa onMount
Anda dapat memanggil onMount beberapa kali dalam satu komponen. Pemanggilan dijalankan sesuai urutan deklarasi.
Langganan
Berlanggananlah ke sumber eksternal di sini dan berhenti berlangganan dalam fungsi pembersihan yang dikembalikan.
Hindari Pekerjaan Berat
Tunda pekerjaan yang tidak penting atau gunakan requestIdleCallback agar tidak menghambat tampilan pertama.
Perbedaan dari beforeUpdate
onMount dijalankan tepat satu kali, sedangkan beforeUpdate dijalankan sebelum setiap pembaruan reaktif.
Pemeriksaan Singkat
Bagaimana cara membersihkan pengatur waktu berulang yang dimulai dalam onMount?
Ringkasan
onMount dijalankan sekali setelah pemasangan; kembalikan sebuah fungsi untuk menangani pembersihan; fungsi ini tidak pernah dijalankan di server.
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
- 41
- Pelajaran
- 163
Pertanyaan yang Sering Diajukan
Apakah pelajaran “onMount: Menjalankan Kode Setelah Render” gratis?
Ya — teks lengkap “onMount: Menjalankan Kode Setelah Render” 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 “onMount: Menjalankan Kode Setelah Render”?
Jalankan kode setelah komponen ditambahkan ke DOM. 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 1 dari 4.
Berapa lama pelajaran “onMount: Menjalankan Kode Setelah Render” 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