{#key} untuk Memaksa Render Ulang
Gunakan blok key untuk menghancurkan dan membuat ulang komponen saat suatu nilai berubah.
{#key} untuk Memaksa Render Ulang 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.
Blok key
{#key expr} menghancurkan dan membuat ulang isinya setiap kali expr berubah. Ini berguna ketika Anda menginginkan komponen baru.
Mulai Ulang Animasi
Bungkus elemen beranimasi dalam {#key} untuk memutar ulang transisi setiap kali kunci berubah.
{#key id}
<div in:fade>{message}</div>
{/key}Atur Ulang Status Komponen
Bungkus komponen anak yang memiliki status internal dengan {#key id} untuk mengatur ulang status tersebut sepenuhnya ketika id berubah.
{#key currentUser.id}
<UserProfile user={currentUser} />
{/key}Perbedaan antara Kunci key dan each
Blok {#key} menggunakan kunci untuk satu elemen; {#each ... (key)} menggunakan kunci untuk item dalam daftar.
Kapan Menggunakannya
Gunakan ketika Anda ingin mengatur ulang status internal yang kompleks tanpa menghapus setiap bidang secara manual.
Biaya Performa
Setiap perubahan kunci membongkar dan membangun ulang subpohon. Hindari membungkus pohon yang sangat besar jika kunci sering berubah.
Tag Penutup
Tutup dengan {/key}.
Penggunaan Umum
Mulai ulang animasi, atur ulang input yang tidak dikendalikan, atau paksa pengambilan data baru saat berpindah ke entitas baru melalui perutean.
Alternatif: bind:this
Terkadang Anda dapat mengatur ulang status secara imperatif dengan referensi. {#key} lebih rapi untuk pengaturan ulang deklaratif.
Gabungkan dengan Transisi
Padukan dengan transisi untuk memberikan petunjuk visual yang halus bahwa sesuatu telah berubah secara mendasar.
Hindari Perubahan Sepele
Jangan membungkus konten yang sepenuhnya reaktif dalam {#key}—Svelte sudah memperbaruinya secara efisien.
Pemeriksaan Singkat
Apa yang dilakukan {#key x} ketika x berubah?
Ringkasan
{#key} memaksa penghancuran dan pembangunan ulang sepenuhnya setiap kali ekspresinya berubah, sehingga berguna untuk pengaturan ulang dan pemutaran ulang animasi.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “{#key} untuk Memaksa Render Ulang” gratis?
Ya — teks lengkap “{#key} untuk Memaksa Render Ulang” 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 “{#key} untuk Memaksa Render Ulang”?
Gunakan blok key untuk menghancurkan dan membuat ulang komponen saat suatu nilai berubah. 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 “{#key} untuk Memaksa Render Ulang” 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
- {#if} {#else if} {#else}
- {#each} dengan Indeks dan Kunci
- {#key} untuk Memaksa Render Ulang
- {#each} Bersarang dan Pembaruan Berkunci