Teknik Memoisasi
Hindari komputasi berulang dengan memoisasi.
Teknik Memoisasi adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. 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 3 pelajaran total.
Mengurangi Pekerjaan
Kinerja sering kali diperoleh dengan tidak menghitung ulang atau merender ulang hal-hal yang belum berubah. Vue menyediakan beberapa alat memoisasi yang menyimpan hasil dalam cache dan melewati pembaruan yang tidak diperlukan.
Menyimpan Hasil Komputasi dalam Cache
Properti hasil komputasi menyimpan hasilnya dalam cache dan hanya menghitung ulang ketika salah satu dependensi reaktifnya berubah. Karena itu, properti ini jauh lebih hemat daripada metode yang dijalankan pada setiap perenderan.
computed: {
expensiveTotal() {
return this.items.reduce((sum, i) => sum + i.price, 0)
}
}Hasil Komputasi vs Metode
Metode dijalankan setiap kali templat dirender ulang, meskipun masukannya sama. Nilai hasil komputasi menggunakan kembali nilai yang tersimpan dalam cache, jadi pilihlah hasil komputasi untuk data turunan yang digunakan dalam templat.
// method: runs on EVERY render
methods: { total() { /* ... */ } }
// computed: cached until items change
computed: { total() { /* ... */ } }v-once untuk Konten Statis
Direktif v-once merender elemen satu kali, lalu melewatinya pada semua pembaruan berikutnya. Gunakan direktif ini untuk konten yang tidak pernah berubah.
<template>
<h1 v-once>{{ appTitle }}</h1>
</template>Kapan Menggunakan v-once
Terapkan v-once pada bagian statis yang besar, seperti kaki halaman, teks ketentuan, atau kepala halaman tetap. Vue memperlakukan hasil yang telah dirender sebagai statis dan tidak pernah membandingkannya kembali.
<footer v-once>
<p>Copyright 2024. All rights reserved.</p>
</footer>v-memo untuk Daftar dengan Biaya Pemrosesan Tinggi
Direktif v-memo melakukan memoisasi pada subpohon dan hanya merendernya kembali ketika nilai dalam larik dependensinya berubah. Direktif ini sangat berguna untuk daftar besar.
<div v-for="item in list" :key="item.id" v-memo="[item.selected]">
{{ item.name }} - {{ item.selected }}
</div>Cara Kerja v-memo
Setiap item hanya dirender kembali ketika larik memoisasinya berubah. Jika item.selected tetap sama, Vue melewati perenderan ulang baris tersebut sepenuhnya, meskipun komponen induknya diperbarui.
Menghindari Perenderan Ulang yang Tidak Diperlukan
Komponen dirender ulang ketika data reaktif atau propertinya berubah. Buatlah komponen tetap kecil dan terfokus agar perubahan di satu bagian tidak memaksa bagian lain yang tidak terkait untuk dirender ulang.
Kunci Stabil dalam Daftar
Selalu berikan v-for :key yang stabil dan unik. Menggunakan indeks larik sebagai kunci dapat menyebabkan Vue menggunakan kembali simpul DOM yang salah dan merender ulang lebih banyak dari yang diperlukan.
<!-- prefer a stable id -->
<li v-for="user in users" :key="user.id">{{ user.name }}</li>Meminimalkan Data Reaktif
Masukkan data ke dalam keadaan reaktif hanya jika templat bergantung padanya. Objek besar atau nilai yang tidak pernah berubah di antarmuka pengguna menambah beban pada pelacakan reaktivitas. Jika sesuai, gunakan variabel biasa yang tidak reaktif.
import { shallowRef } from "vue"
// shallowRef avoids deep reactivity on large objects
const bigConfig = shallowRef(loadConfig())Melakukan Memoisasi pada Fungsi Murni
Untuk perhitungan JavaScript murni di luar reaktivitas Vue, Anda dapat menyimpan hasil dalam peta sederhana agar pemanggilan berulang dengan masukan yang sama dapat mengembalikan hasil secara langsung.
const cache = new Map()
function fib(n) {
if (n < 2) return n
if (cache.has(n)) return cache.get(n)
const result = fib(n - 1) + fib(n - 2)
cache.set(n, result)
return result
}Pemeriksaan Singkat
Uji pemahaman Anda tentang memoisasi.
Ringkasan
Kurangi pekerjaan yang terbuang dengan penyimpanan dalam cache: properti hasil komputasi melakukan memoisasi pada nilai turunan, v-once merender konten statis satu kali, dan v-memo melewati perenderan ulang subpohon dalam daftar besar. Gunakan kunci yang stabil dan minimalkan keadaan reaktif. Selanjutnya, Anda akan belajar menemukan dan memperbaiki hambatan kinerja dengan alat nyata.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Teknik Memoisasi” gratis?
Ya — teks lengkap “Teknik Memoisasi” 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 3 pelajaran total.
Apa yang akan aku pelajari di “Teknik Memoisasi”?
Hindari komputasi berulang dengan memoisasi. 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 2 dari 3.
Berapa lama pelajaran “Teknik Memoisasi” 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.