Teknik Memorisasi
Elakkan pengiraan berulang dengan memorisasi.
Teknik Memorisasi ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 3. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 3 pelajaran.
Melakukan Kurang Kerja
Prestasi sering terhasil daripada tidak mengira semula atau memaparkan semula perkara yang tidak berubah. Vue menyediakan beberapa alat memoisation yang menyimpan hasil dalam cache dan melangkau kemas kini yang tidak perlu.
Penyimpanan Nilai Terkira dalam Cache
Sifat terkira menyimpan hasilnya dalam cache dan hanya mengira semula apabila salah satu kebergantungan reaktifnya berubah. Ini menjadikannya jauh lebih ringan daripada kaedah yang berjalan pada setiap pemaparan.
computed: {
expensiveTotal() {
return this.items.reduce((sum, i) => sum + i.price, 0)
}
}Nilai Terkira berbanding Kaedah
Kaedah berjalan setiap kali templat dipaparkan semula, walaupun masukannya sama. Nilai terkira menggunakan semula nilai dalam cache, jadi utamakan nilai terkira untuk data terbitan yang digunakan dalam templat.
// method: runs on EVERY render
methods: { total() { /* ... */ } }
// computed: cached until items change
computed: { total() { /* ... */ } }v-once untuk Kandungan Statik
Direktif v-once memaparkan elemen sekali sahaja, kemudian melangkau elemen itu dalam semua kemas kini seterusnya. Gunakannya untuk kandungan yang tidak pernah berubah.
<template>
<h1 v-once>{{ appTitle }}</h1>
</template>Bila Menggunakan v-once
Gunakan v-once pada bahagian statik yang besar seperti pengaki, teks syarat atau pengepala tetap. Vue menganggap hasil yang dipaparkan sebagai statik dan tidak pernah membandingkannya semula.
<footer v-once>
<p>Copyright 2024. All rights reserved.</p>
</footer>v-memo untuk Senarai Berat
Direktif v-memo menyimpan subpokok dalam cache dan hanya memaparkannya semula apabila nilai dalam tatasusunan kebergantungannya berubah. Direktif ini sangat berguna untuk senarai besar.
<div v-for="item in list" :key="item.id" v-memo="[item.selected]">
{{ item.name }} - {{ item.selected }}
</div>Cara v-memo Berfungsi
Setiap item hanya dipaparkan semula apabila tatasusunan memo untuknya berubah. Jika item.selected kekal sama, Vue melangkau pemaparan semula baris itu sepenuhnya, walaupun induknya dikemas kini.
Mengelakkan Pemaparan Semula Tidak Perlu
Komponen dipaparkan semula apabila data reaktif atau sifatnya berubah. Pastikan komponen kecil dan berfokus supaya perubahan di satu bahagian tidak memaksa bahagian yang tidak berkaitan untuk dipaparkan semula.
Kunci Stabil dalam Senarai
Sentiasa berikan v-for kunci :key yang stabil dan unik. Menggunakan indeks tatasusunan sebagai kunci boleh menyebabkan Vue menggunakan semula nod DOM yang salah dan memaparkan semula lebih banyak daripada yang diperlukan.
<!-- prefer a stable id -->
<li v-for="user in users" :key="user.id">{{ user.name }}</li>Mengekalkan Data Reaktif pada Tahap Minimum
Letakkan data dalam keadaan reaktif hanya jika templat bergantung padanya. Objek besar atau nilai yang tidak pernah berubah dalam antara muka pengguna menambah beban kepada penjejakan kereaktifan. Gunakan pemboleh ubah biasa yang tidak reaktif jika sesuai.
import { shallowRef } from "vue"
// shallowRef avoids deep reactivity on large objects
const bigConfig = shallowRef(loadConfig())Memoisation Fungsi Tulen
Untuk pengiraan JavaScript tulen di luar kereaktifan Vue, anda boleh menyimpan hasil dalam peta ringkas supaya panggilan berulang dengan masukan yang sama mengembalikan hasil serta-merta.
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
}Semakan Pantas
Uji pengetahuan anda tentang memoisation.
Imbas Kembali
Kurangkan kerja yang terbuang dengan penyimpanan dalam cache: sifat terkira memoisasikan nilai terbitan, v-once memaparkan kandungan statik sekali sahaja, dan v-memo melangkau pemaparan semula subpokok dalam senarai besar. Gunakan kunci yang stabil dan kekalkan keadaan reaktif pada tahap minimum. Seterusnya, anda akan belajar mencari dan membaiki kesesakan prestasi dengan alat sebenar.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 42
- Pelajaran
- 156
Soalan Lazim
Adakah pelajaran “Teknik Memorisasi” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “Teknik Memorisasi”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 3 pelajaran.
Apakah yang akan saya pelajari dalam “Teknik Memorisasi”?
Elakkan pengiraan berulang dengan memorisasi. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 3.
Berapa lamakah pelajaran “Teknik Memorisasi” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?
Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.