v-memo untuk Memoisasi Template
Direktif v-memo, array dependensi, kondisi saat render ulang dilewati, serta perbandingan dengan computed.
v-memo untuk Memoisasi Template adalah pelajaran Vue 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 Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.
Apa itu v-memo
v-memo membuat satu bagian templat menjadi memo. Vue menyimpan keluaran yang telah dirender dan hanya merender ulang subpohon tersebut ketika salah satu dependensi yang dicantumkan berubah. Ini adalah pilihan khusus untuk meningkatkan kinerja markup yang mahal tetapi sebagian besar statis.
Array Dependensi
Anda mengikat sebuah array dependensi. Selama setiap nilai dalam array sama dengan nilai sebelumnya, Vue melewati pembaruan seluruh elemen beserta anak-anaknya.
<div v-memo="[dep1, dep2]">
<!-- skipped unless dep1 or dep2 change -->
</div>Array Kosong
Array kosong v-memo="[]" berarti konten dirender sekali dan tidak pernah diperbarui—setara dengan merender konten statis satu kali.
<div v-memo="[]">
<!-- rendered once, never re-rendered -->
</div>Kasus Penggunaan Utama: v-for
Alasan utama menggunakan v-memo adalah daftar berukuran sangat besar. Letakkan di dalam v-for agar setiap baris hanya dirender ulang ketika data relevan miliknya berubah.
<div
v-for="item in list"
:key="item.id"
v-memo="[item.id === selectedId]"
>
...
</div>Membuat Baris Terpilih Menjadi Memo
Dalam contoh klasik, ribuan baris hanya dirender ulang ketika status terpilihnya berubah. Perbandingan item.id === selectedId berarti sebuah baris hanya diperbarui ketika memperoleh atau kehilangan status terpilih.
<tr
v-for="item in items"
:key="item.id"
v-memo="[item.id === selectedId]"
>
<td :class="{ active: item.id === selectedId }">
{{ item.name }}
</td>
</tr>Cantumkan Semua Dependensi Reaktif
Anda harus menyertakan setiap nilai reaktif yang menjadi dependensi subpohon tersebut. Jika salah satunya terlupa, elemen tidak akan diperbarui ketika nilai itu berubah—menimbulkan kesalahan antarmuka yang tidak berubah dan sulit dideteksi.
<!-- WRONG: name can change but is not listed -->
<div v-memo="[item.id]">{{ item.name }}</div>Jangan Gabungkan dengan v-if
Jangan menempatkan v-memo pada elemen yang sama dengan v-if atau direktif struktural v-for dengan cara yang saling bertentangan. Secara khusus, v-memo dan v-if pada elemen yang sama tidak didukung dan menghasilkan perilaku yang tidak terdefinisi.
<!-- AVOID -->
<div v-memo="[a]" v-if="show">...</div>v-memo dan computed
computed menyimpan nilai yang diturunkan dari state reaktif. v-memo menyimpan VNode yang dirender. Keduanya menyelesaikan masalah yang berbeda: computed mencegah penghitungan ulang data, sedangkan v-memo mencegah perenderan ulang markup.
Saat computed Sudah Memadai
Jika hambatan Anda adalah penghitungan ulang data (pemfilteran, pengurutan, atau pemformatan), gunakan computed terlebih dahulu—cara ini lebih sederhana dan lebih sulit disalahgunakan.
import { computed } from "vue";
const sorted = computed(() =>
[...items.value].sort((a, b) => a.rank - b.rank)
);Saat v-memo Membantu
Gunakan v-memo hanya ketika pembuatan profil menunjukkan bahwa perenderan ulang daftar besar mendominasi waktu, sementara sebagian besar baris tidak berubah di antara pembaruan.
Ukur Dahulu
v-memo menambah penggunaan memori dan biaya perbandingan. Untuk daftar kecil, cara ini bisa lebih lambat daripada perenderan biasa. Selalu buat profil sebelum dan sesudahnya untuk memastikan adanya peningkatan nyata.
Pemeriksaan Singkat
Kapan v-memo menjadi alat yang tepat?
Ringkasan
v-memo="[deps]" melewati perenderan ulang subpohon selama semua dependensi yang dicantumkan tidak berubah—ideal untuk digunakan di dalam daftar besar v-for. Cantumkan setiap dependensi reaktif, jangan pernah menggabungkannya dengan v-if pada elemen yang sama, pilih computed untuk nilai turunan, dan selalu buat profil untuk memastikan peningkatan kinerja yang nyata.
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
Pertanyaan yang Sering Diajukan
Apakah pelajaran “v-memo untuk Memoisasi Template” gratis?
Ya — teks lengkap “v-memo untuk Memoisasi Template” 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 “v-memo untuk Memoisasi Template”?
Direktif v-memo, array dependensi, kondisi saat render ulang dilewati, serta perbandingan dengan computed. 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 1 dari 4.
Berapa lama pelajaran “v-memo untuk Memoisasi Template” 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
- v-memo untuk Memoisasi Template
- Membuat Profil dengan Tab Performa Vue DevTools
- Scroll Virtual untuk Daftar Besar
- Web Worker dengan Vue