Kemahiran pengoptimuman dan pengalaman praktikal pemaparan senarai dalam Vue

Kemahiran pengoptimuman dan pengalaman praktikal pemaparan senarai dalam Vue

Kata Pengantar
Dalam proses membangunkan aplikasi web menggunakan Vue, pemaparan senarai adalah keperluan biasa. Walau bagaimanapun, apabila terdapat sejumlah besar data dalam senarai, operasi DOM yang kerap boleh menyebabkan prestasi halaman menurun. Untuk menyelesaikan masalah ini, artikel ini akan memperkenalkan beberapa teknik pengoptimuman pemaparan senarai dalam Vue dan memberikan pengalaman praktikal serta contoh kod.

1. Elakkan menggunakan indeks sebagai nilai utama

Apabila menggunakan gelung v-for untuk membuat senarai dalam Vue, anda perlu memberikan nilai kunci untuk mengenal pasti setiap item secara unik. Dalam sesetengah kes, pembangun mungkin lebih suka menggunakan indeks bulat sebagai nilai utama. Walau bagaimanapun, pendekatan ini tidak disyorkan.

Terdapat beberapa masalah menggunakan indeks sebagai nilai utama. Apabila susunan dalam senarai berubah, Vue akan memaparkan semula DOM melalui algoritma perbezaan. Jika anda menggunakan indeks sebagai nilai utama, ia mungkin menyebabkan beberapa operasi DOM yang tidak diperlukan, sekali gus mengurangkan prestasi. Oleh itu, kita harus menggunakan pengecam unik setiap item sebagai nilai utama.

Contohnya:

d477f9ce7bf77f53fbcf36bec1b69b7a
ff6d136ddc5fdfeffaf53ff6ee95f185

<li v-for="item in items" :key="item.id">{{ item.name }}</li>

929d1f5ca49e04fdcb27f9465b944689
21c97d3a051048b8e55e3c8f199a54b2

2. Gunakan v-show dan bukannya v-if

jika Kedua-dua v-show dan v-show boleh mengawal paparan dan menyembunyikan elemen DOM. Walau bagaimanapun, v-if mempunyai beberapa overhed tambahan kerana ia mencipta semula atau memusnahkan elemen DOM sepenuhnya. Dan v-show hanya menyembunyikan atau menunjukkan elemen DOM dengan mengubah suai sifat CSS. Oleh itu, apabila kita perlu kerap menukar paparan dan menyembunyikan item senarai, kita harus menggunakan v-show dan bukannya v-if.

Contohnya:

d477f9ce7bf77f53fbcf36bec1b69b7a

ff6d136ddc5fdfeffaf53ff6ee95f185

<li v-for="item in items" :key="item.id" v-show="item.visible">{{ item.name }}</li>

929d1f5ca49e04fdcb27f9465b944689

21c97d3a051048b8e55e3c8f199a54b2

Untuk satu senarai komponen tempatan

Gunakan setiap item dalam cache

komponen yang lebih kompleks, kita boleh menggunakan cache komponen tempatan yang disediakan oleh Vue untuk meningkatkan prestasi. Dengan meletakkan definisi komponen dalam teg 7c9485ff8c3cba5ae9343ed63c2dc3f7, Vue akan cache komponen yang telah diberikan apabila bertukar antara komponen, dengan itu mengelakkan operasi DOM berulang.

Contohnya:

d477f9ce7bf77f53fbcf36bec1b69b7a

ff6d136ddc5fdfeffaf53ff6ee95f185

<keep-alive>
  <item :key="item.id" v-for="item in items"></item>
</keep-alive>

929d1f5ca49e04fdcb27f9465b944689

21c97d3a051048b8e55e3c8f199a54b2

Empat dalam senarai adalah sangat besar , kita boleh Gunakan senarai maya untuk mengoptimumkan prestasi pemaparan. Senarai maya hanya akan memaparkan item senarai yang boleh dilihat pada masa ini, bukannya keseluruhan senarai. Senarai maya boleh dilaksanakan dengan mengira kedudukan dan saiz setiap item senarai secara dinamik.

Berikut ialah contoh penggunaan vue-virtual-scroll-list, pemalam senarai maya berasaskan Vue:

d477f9ce7bf77f53fbcf36bec1b69b7a

ff6d136ddc5fdfeffaf53ff6ee95f185

<virtual-list :size="items.length" :remain="10">
  <template v-slot="{ range }">
    <li v-for="index in range" :key="items[index].id">{{ items[index].name }}</li>
  </template>
</virtual-list>

929d1f5ca49e04fdcb27f9465b944689

21c97d3a051048b8e55e3c8f199a54b2

5. Gunakan pemuatan paging

Apabila jumlah data senarai terlalu besar, anda boleh menggunakan pemuatan halaman untuk mengurangkan kesan memuatkan sejumlah besar data sekaligus pada prestasi halaman. Dengan membahagikan senarai kepada berbilang halaman, hanya memuatkan data halaman semasa setiap kali, dan menyediakan fungsi penukaran halaman, tekanan pemaparan halaman dapat dikurangkan dengan berkesan.

Berikut ialah contoh penggunaan vue-infinite-scroll, pemalam memuatkan halaman berasaskan Vue:

d477f9ce7bf77f53fbcf36bec1b69b7a

444ad1a39ab6976b669d371a287b0b3b

ff6d136ddc5fdfeffaf53ff6ee95f185

<li v-for="item in items" :key="item.id">{{ item.name }}</li>

224f1b147a69b1f0e700f8d329635183

e5be6e5644b951560b7a4435e8453de5

eee507863231767bdcc207556a71d96d

<button @click="loadMore">Load More</button>

16b28748ea4df4d9c2150843fecfba68

21c97d3a051048b8e55e3c8f199a54b2

> import InfiniteScroll daripada ' vue-infinite-scroll'

eksport lalai {

data() {

return {
  items: [],
  page: 1
}

},

kaedah: {

loadMore() {
  // AJAX请求获取下一页数据
  // this.items = [...this.items, ...newData]
  this.page++
}

},

mounted() {
rreee

},

(Destroee
},

// 初始化分页加载插件
// this.$refs.infiniteScroll.addEventListener('scrolled', this.loadMore)

}
}

2cacc6d41bbb37262a98f745aa00fbf0

Kesimpulan
Melalui kemahiran pengoptimuman dan pengalaman praktikal di atas, kami boleh mengendalikan pemaparan senarai dengan lebih cekap dalam Vue dan mengoptimumkan prestasi halaman. Pemilihan nilai utama yang munasabah, penggunaan v-show, caching komponen setempat, senarai maya dan pemuatan halaman boleh meningkatkan kelajuan pemaparan halaman dan pengalaman pengguna. Saya harap artikel ini akan membantu anda dalam proses menggunakan pemaparan senarai dalam Vue.

Atas ialah kandungan terperinci Kemahiran pengoptimuman dan pengalaman praktikal pemaparan senarai dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!