Cara menggunakan komponen keep-alive Vue untuk mengoptimumkan prestasi pemaparan halaman

Cara menggunakan komponen keep-alive Vue untuk mengoptimumkan prestasi pemaparan halaman

Dengan pembangunan pembangunan bahagian hadapan, aplikasi halaman tunggal (SPA) menjadi semakin biasa dalam aplikasi web. Walau bagaimanapun, masalah seterusnya ialah prestasi pemaparan halaman, terutamanya apabila perubahan data berskala besar atau penukaran halaman yang kerap akan membawa kepada kemerosotan prestasi. Komponen keep-alive Vue menyediakan penyelesaian pengoptimuman yang boleh meningkatkan prestasi pemaparan halaman dengan ketara. Artikel ini akan memperkenalkan cara menggunakan komponen keep-alive Vue untuk mengoptimumkan prestasi pemaparan halaman dan menunjukkannya melalui contoh kod.

1. Peranan komponen keep-alive

Vue's keep-alive komponen boleh cache komponen ke dalam memori Apabila komponen ditukar, ia tidak akan dipaparkan semula, tetapi akan mengambil semula komponen yang telah diberikan secara langsung. Ini boleh meningkatkan prestasi pemaparan halaman dan mengurangkan penggunaan prestasi yang tidak perlu. Pada masa yang sama, komponen keep-alive juga menyediakan dua fungsi cangkuk kitaran hayat, diaktifkan dan dinyahaktifkan, yang boleh melakukan operasi tertentu apabila komponen diaktifkan dan dinyahaktifkan.

2. Gunakan komponen keep-alive

Apabila menggunakan komponen keep-alive, anda perlu membungkus komponen yang perlu dicache dalam teg 7c9485ff8c3cba5ae9343ed63c2dc3f7 komponen . Contohnya:

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<keep-alive>
  <router-view :key="$route.fullPath"></router-view>
</keep-alive>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

Dalam contoh ini, kami menetapkan nilai atribut utama bagi 975b587bf85a482ea10b0a28848e78a4 route.fullPath untuk menukar dan cache komponen secara dinamik. Apabila laluan berubah, komponen keep-alive akan menentukan sama ada komponen perlu dipaparkan semula berdasarkan perubahan :key.

3. Kitaran hayat komponen cache

Apabila menggunakan komponen kekal hidup, anda perlu memberi perhatian kepada kitaran hayat komponen cache. Apabila komponen dicache, kitaran hayatnya akan mengalami beberapa perubahan. Secara khusus, dua fungsi cangkuk kitaran hayat yang diaktifkan dan dinyahaktifkan akan dilaksanakan apabila komponen diaktifkan dan dinyahaktifkan.

Sebagai contoh, kita boleh mendapatkan data komponen yang diaktifkan dalam fungsi cangkuk yang diaktifkan dan melakukan beberapa operasi permulaan. Dan dalam fungsi cangkuk yang dinyahaktifkan, kita boleh menyimpan keadaan komponen supaya ia boleh dipulihkan selepas pengaktifan semula.

Berikut ialah contoh kod:

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<h2>{{ message }}</h2>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

855348821b2e8f2cc4b633bf98f064df lalai{
855348821b2e8f2cc4b633bf98f064df
},

activated() {

return {
  message: 'Hello World'
};

},

deactivated() {

this.message = 'Component activated';
// 执行其他操作

}

};

2cacc6d41bbb37262a98f745aa00fbf0

Dalam contoh ini, apabila komponen ini dicache, ia akan diaktifkan setiap kali Komponen diaktifkan" dipaparkan, dan setiap kali ia dinyahaktifkan, keadaan komponen boleh disimpan dalam fungsi cangkuk yang dinyahaktifkan.

4. Elakkan caching Tidak perlu menggunakan komponen keep-alive

Walaupun komponen keep-alive boleh meningkatkan prestasi pemaparan halaman, tidak semua komponen sesuai untuk caching. Sesetengah komponen perlu mengemas kini data setiap kali ia dipaparkan semula, jadi menggunakan komponen kekal hidup dalam komponen ini boleh membawa kepada data yang salah atau hasil yang tidak dijangka.

Oleh itu, bagi komponen yang tidak perlu dicache, kita boleh mengecualikan caching dengan menetapkan atribut exclude. Contohnya:

d477f9ce7bf77f53fbcf36bec1b69b7a

dc6dce4a544fdca2df29d5ac0ea9906b

// 保存组件状态

16b28748ea4df4d9c2150843fecfba68

21c97d3a051048b8e55e3c8f199a54b2

Dalam contoh ini, ComponentA akan dicache, tetapi ComponentB tidak akan dicache.

Ringkasan:

Komponen keep-alive Vue ialah alat pengoptimuman prestasi yang berkuasa yang boleh meningkatkan prestasi pemaparan halaman. Dengan menyimpan komponen dalam memori, pemaparan semula yang tidak perlu boleh dielakkan Pada masa yang sama, dua fungsi cangkuk kitaran hayat, diaktifkan dan dinyahaktifkan, disediakan untuk memenuhi beberapa keperluan yang memerlukan operasi khusus dilakukan apabila komponen diaktifkan dan dinyahaktifkan. Walau bagaimanapun, perlu diingatkan bahawa tidak semua komponen sesuai untuk caching Bagi komponen yang perlu dipaparkan semula setiap kali, komponen kekal hidup harus dielakkan. Dengan menggunakan komponen keep-alive secara rasional, anda boleh meningkatkan prestasi pemaparan halaman dan meningkatkan pengalaman pengguna.

Di atas ialah pengenalan dan contoh kod tentang cara menggunakan komponen keep-alive Vue untuk mengoptimumkan prestasi pemaparan halaman. Semoga artikel ini bermanfaat kepada anda.

Atas ialah kandungan terperinci Cara menggunakan komponen keep-alive Vue untuk mengoptimumkan prestasi pemaparan halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!