Pembangunan kemasukan VUE3: menggunakan keep-alive untuk caching komponen

Vue ialah rangka kerja bahagian hadapan yang sangat popular, dan Vue3 ialah versi terkini Vue. Dalam Vue3, menggunakan keep-alive untuk caching komponen ialah ciri yang sangat berguna yang boleh meningkatkan prestasi tapak web.

keep-alive ialah komponen abstrak dalam Vue3 Ia boleh cache komponen untuk menghalangnya daripada berulang kali dicipta dan dimusnahkan semasa penukaran yang kerap. Ciri ini sangat berguna dalam beberapa senario komponen yang memerlukan penukaran yang kerap, seperti karusel, tab, Dialog, dsb.

Mari perkenalkan cara menggunakan keep-alive untuk caching komponen dalam Vue3.

1. Penggunaan asas keep-alive

1. Menggunakan komponen keep-alive dalam Vue3

Untuk menggunakan keep-alive, anda perlu Tambah teg 7c9485ff8c3cba5ae9343ed63c2dc3f7 pada elemen akar komponen, seperti yang ditunjukkan di bawah:

<template>
  <keep-alive>
    <component :is="selected"></component>
  </keep-alive>
</template>

2. Cache komponen

Selepas menambah teg keep-alive, yang dipaparkan pada masa ini Komponen akan dicache. Apabila komponen ditukar, Vue3 akan memberi keutamaan untuk memuatkan komponen daripada cache dan bukannya mencipta semula komponen, dengan itu meningkatkan prestasi tapak web.

2. Penggunaan lanjutan keep-alive

1. Konfigurasi strategi cache

Secara lalai, keep-alive akan cache semua komponen, tetapi Kadangkala kita hanya mahu cache komponen tertentu. Pada masa ini kita boleh menggunakan atribut sertakan dan tidak termasuk untuk mengkonfigurasi strategi cache.

Dalam templat, kita boleh menggunakan atribut include untuk mengkonfigurasi komponen yang perlu dicache:

<template>
  <keep-alive include="component-a, component-b">
    <component :is="selected"></component>
  </keep-alive>
</template>

Dengan cara ini, hanya komponen bernama component-a dan component-b akan dicache .

Dalam templat, kita juga boleh menggunakan atribut exclude untuk mengkonfigurasi komponen yang tidak perlu dicache:

<template>
  <keep-alive exclude="component-c">
    <component :is="selected"></component>
  </keep-alive>
</template>

Dengan cara ini, komponen bernama component-c tidak akan dicache.

2. Kitaran hayat cache

Dalam kitaran hayat komponen cache, Vue3 menyediakan beberapa fungsi cangkuk yang boleh kita gunakan untuk memantau kitaran hayat komponen cache.

diaktifkan ialah fungsi cangkuk yang dicetuskan apabila komponen diaktifkan. Fungsi cangkuk yang diaktifkan dicetuskan apabila komponen dimuatkan daripada cache. Kami boleh melakukan beberapa operasi pada komponen cache dalam diaktifkan.

nyahaktifkan ialah fungsi cangkuk yang dicetuskan apabila komponen dinyahaktifkan. Fungsi cangkuk yang dinyahaktifkan dicetuskan apabila komponen dialih keluar daripada cache semasa atau ditukar kepada komponen lain.

Anda boleh mentakrifkan dua fungsi cangkuk ini dalam komponen untuk memantau kitaran hayat komponen cache, seperti yang ditunjukkan di bawah:

<script>
export default {
  activated() {
    // 在缓存组件被激活时进行一些操作
  },
  deactivated() {
    // 在缓存组件被停用时进行一些操作
  }
}
</script>

3 Ringkasan

Gunakan keep-alive untuk komponen Caching boleh meningkatkan prestasi tapak web dengan banyaknya Vue3 menyediakan beberapa penggunaan lanjutan, termasuk konfigurasi dasar cache dan pemantauan kitaran hayat cache. Kami boleh menggunakan ciri ini secara fleksibel mengikut keperluan kami untuk mengoptimumkan prestasi tapak web.

Atas ialah kandungan terperinci Pembangunan kemasukan VUE3: menggunakan keep-alive untuk caching komponen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!