Cara menggunakan keep-alive dalam vue untuk meningkatkan kecekapan pembangunan bahagian hadapan

Cara menggunakan keep-alive dalam Vue untuk meningkatkan kecekapan pembangunan bahagian hadapan

Prestasi pembangunan bahagian hadapan sentiasa menjadi salah satu tumpuan pembangun. Untuk meningkatkan pengalaman pengguna dan kelajuan pemuatan halaman, kami selalunya perlu mempertimbangkan cara mengoptimumkan pemaparan bahagian hadapan. Sebagai rangka kerja bahagian hadapan yang popular, Vue menyediakan komponen kekal hidup untuk menyelesaikan masalah prestasi komponen tidak aktif. Artikel ini akan memperkenalkan penggunaan keep-alive dan menunjukkan cara ia boleh meningkatkan kecekapan pembangunan bahagian hadapan dalam Vue melalui contoh kod.

1. Peranan dan prinsip kekal hidup

Dalam Vue, pemusnahan dan penciptaan semula komponen adalah proses yang memakan masa. Jika kami mempunyai beberapa komponen tidak aktif yang tidak digunakan dengan kerap antara suis atau paparan halaman, tetapi dicipta semula setiap kali kami bertukar, ia akan membawa kepada kemerosotan prestasi. Komponen keep-alive boleh menyimpan contoh bagi komponen tidak aktif ini, dengan itu mengelakkan pemusnahan dan penciptaan semula yang tidak perlu serta meningkatkan prestasi rendering.

Secara prinsipnya, keep-alive menyimpan cache DOM maya komponen tidak aktif dalam ingatan dan memulihkan secara langsung kejadian cache apabila komponen bertukar tanpa menciptanya semula. Ini boleh mengurangkan masa dan overhed pemaparan halaman, dengan itu meningkatkan kecekapan pembangunan bahagian hadapan.

2. Menggunakan keep-alive

Menggunakan keep-alive dalam Vue adalah sangat mudah, hanya bungkus komponen yang anda ingin cache di luar komponen. Berikut ialah contoh:

<template>
  <div>
    <h1>首页</h1>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

Dalam kod di atas, kami menggunakan teg <keep-alive> di luar teg <router-view>, yang bermaksud bahawa kami akan Cache contoh <router-view>. <router-view>标签外部使用了<keep-alive>标签，意味着我们将缓存<router-view>的实例。

3. keep-alive的属性

除了基本的使用方法外，keep-alive还提供了一些属性，可以更灵活地控制缓存的组件。

• include：用于指定要缓存的组件名称，支持字符串或正则表达式。例如，include="Home,About"表示只缓存名称为"Home"和"About"的组件。
• exclude：用于指定不需要缓存的组件名称，同样支持字符串或正则表达式。例如，exclude="Login,Register"表示不缓存名称为"Login"和"Register"的组件。
• max：用于指定缓存的最大组件数量。当缓存的组件数量超过限制时，最早缓存的组件将被销毁。例如，max="10"表示最大缓存10个组件。

下面是一个示例，演示如何使用include和exclude属性：

<template>
  <div>
    <h1>首页</h1>
    <keep-alive :include="['Home', 'About']" :exclude="['Login', 'Register']">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

4. keep-alive的生命周期

keep-alive本身也有生命周期钩子函数，可以通过这些钩子函数来监听缓存组件的状态变化。主要的生命周期钩子函数有：

• activated：当缓存组件被激活时调用，通常是在组件第一次进入缓存或者从缓存中恢复时触发。
• deactivated：当缓存组件被停用时调用，通常是在组件离开缓存或者从缓存中销毁时触发。

下面是一个示例，展示如何使用activated和deactivated

Atribut keep-alive

Selain kaedah penggunaan asas, keep-alive juga menyediakan beberapa atribut yang boleh mengawal komponen cache dengan lebih fleksibel.

include: Digunakan untuk menentukan nama komponen yang akan dicache, rentetan sokongan atau ungkapan biasa. Contohnya, include="Home,About" bermaksud bahawa hanya komponen bernama "Home" dan "About" akan dicache.

exclude: digunakan untuk menentukan nama komponen yang tidak perlu dicache Ia juga menyokong rentetan atau ungkapan biasa. Contohnya, exclude="Login,Register" bermaksud komponen yang dinamakan "Login" dan "Daftar" tidak dicache.

🎜maks: digunakan untuk menentukan bilangan maksimum komponen untuk dicache. Apabila bilangan komponen cache melebihi had, komponen cache tertua akan dimusnahkan. Contohnya, maks="10" bermakna cache maksimum ialah 10 komponen. 🎜
🎜Berikut ialah contoh yang menunjukkan cara menggunakan atribut include dan exclude: 🎜

<template>
  <div>
    <h1>首页</h1>
    <keep-alive :include="['Home', 'About']" @activated="onActivated" @deactivated="onDeactivated">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    onActivated() {
      console.log('组件被激活')
    },
    onDeactivated() {
      console.log('组件被停用')
    },
  },
}
</script>

🎜keep-alive life kitaran 🎜🎜🎜keep-alive sendiri juga mempunyai fungsi cangkuk kitaran hayat, di mana anda boleh memantau perubahan status komponen cache. Fungsi cangkuk kitaran hayat utama ialah: 🎜
🎜diaktifkan: dipanggil apabila komponen cache diaktifkan, biasanya dicetuskan apabila komponen memasuki cache untuk kali pertama atau dipulihkan daripada cache. 🎜🎜nyahaktif: Dipanggil apabila komponen cache dinyahaktifkan, biasanya dicetuskan apabila komponen meninggalkan cache atau dimusnahkan daripada cache. 🎜
🎜Berikut ialah contoh yang menunjukkan cara menggunakan fungsi cangkuk diaktifkan dan dinyahaktifkan: 🎜rrreee🎜Dengan mendengar fungsi cangkuk kitaran hayat ini, kami boleh mengendalikan beberapa peristiwa tertentu, seperti melakukan tindakan tertentu apabila komponen cache diaktifkan semula. 🎜🎜Ringkasan: 🎜🎜Menggunakan komponen keep-alive ialah cara yang berkesan untuk mengoptimumkan prestasi aplikasi Vue. Dengan meng-cache contoh komponen tidak aktif, kita boleh mengelakkan pemusnahan dan penciptaan semula yang tidak perlu, dengan itu meningkatkan kecekapan pembangunan bahagian hadapan. Penggunaan munasabah keep-alive dalam aplikasi, digabungkan dengan atribut berkaitan dan fungsi cangkuk kitaran hayat, boleh mengoptimumkan pemaparan halaman dan pengalaman pengguna dengan lebih baik. 🎜🎜Saya harap artikel ini dapat membantu semua orang memahami dan menggunakan keep-alive dalam Vue. 🎜

Atas ialah kandungan terperinci Cara menggunakan keep-alive dalam vue untuk meningkatkan kecekapan pembangunan bahagian hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!