Cara mengurangkan pemaparan berulang halaman melalui komponen kekal hidup Vue

Cara mengurangkan pemaparan berulang halaman melalui komponen kekal hidup Vue

Dalam Vue.js, pemaparan berulang halaman adalah masalah biasa. Apabila kami menukar halaman atau melompat antara berbilang komponen, Vue akan memaparkan semula keseluruhan pepohon komponen, dan proses ini mungkin memakan banyak sumber dan masa pengkomputeran. Untuk menyelesaikan masalah ini, Vue menyediakan komponen terbina dalam yang dipanggil keep-alive, yang boleh membantu kami mengurangkan pemaparan berulang halaman. Komponen

keep-alive ialah komponen abstrak yang disediakan oleh Vue untuk menyimpan sub-komponen stateful. Fungsinya adalah untuk cache sub-komponen untuk mengelakkannya daripada dimusnahkan dan dicipta semula, dengan itu mengurangkan kos pemaparan berulang halaman. Mari kita lihat cara menggunakan komponen keep-alive untuk mengoptimumkan prestasi halaman.

Pertama, kita perlu menggunakan komponen keep-alive dalam komponen induk untuk membalut komponen anak yang perlu dicache. Sebagai contoh, kami mempunyai subkomponen yang dipanggil Laman Utama yang kami mahu cache semasa menukar halaman. Kita boleh membungkusnya dalam komponen keep-alive, seperti yang ditunjukkan di bawah:

<template>
  <keep-alive>
    <Home />
  </keep-alive>
</template>

Seterusnya, kita boleh mengoptimumkan lagi pemaparan halaman dengan menetapkan sifat komponen keep-alive. Komponen keep-alive menyediakan termasuk dan tidak termasuk atribut untuk menentukan komponen yang perlu dicache dan komponen yang tidak perlu dicache.

Sebagai contoh, jika kita mahu cache semua sub-komponen, kita boleh menetapkan atribut include kepada "*":

<template>
  <keep-alive :include="['*']">
    ...
  </keep-alive>
</template>

Jika kita hanya mahu cache sub-komponen tertentu, kita boleh menetapkan atribut include kepada tatasusunan yang mengandungi Nama yang diperlukan bagi subkomponen cache:

<template>
  <keep-alive :include="['Home', 'About']">
    ...
  </keep-alive>
</template>

Selain atribut include, komponen keep-alive juga menyediakan atribut exclude, yang digunakan untuk menentukan komponen mana yang tidak perlu dicache. Sama seperti atribut include, atribut exclude boleh ditetapkan kepada "*" untuk mengecualikan semua komponen atau kepada tatasusunan yang mengandungi nama subkomponen yang tidak perlu dicache.

Semasa menggunakan komponen keep-alive, kami juga boleh menggunakan fungsi cangkuk yang disediakan untuk mengoptimumkan lagi pemaparan halaman. Komponen keep-alive mempunyai dua fungsi cangkuk: diaktifkan dan dinyahaktifkan. Fungsi cangkuk yang diaktifkan dipanggil apabila komponen diaktifkan, manakala fungsi cangkuk yang dinyahaktifkan dipanggil apabila komponen dinyahaktifkan.

Kita boleh melaksanakan beberapa logik dalam fungsi cangkuk yang diaktifkan yang perlu dilaksanakan apabila komponen kanak-kanak diaktifkan oleh cache. Sebagai contoh, anda boleh menghantar permintaan rangkaian dalam fungsi cangkuk yang diaktifkan untuk mengemas kini data subkomponen. Begitu juga, dalam fungsi cangkuk yang dinyahaktifkan, anda boleh melakukan beberapa logik yang perlu dilaksanakan apabila subkomponen dinyahaktifkan, seperti mengosongkan data cache, dsb.

Berikut ialah contoh penggunaan fungsi cangkuk yang diaktifkan:

<template>
  <keep-alive :include="['Home']">
    <Home />
  </keep-alive>
</template>

<script>
export default {
  components: {
    Home
  },
  activated() {
    // 在子组件被激活时执行的逻辑
    this.$http.get('/api/data')
      .then(response => {
        this.data = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
}
</script>

Dengan menggunakan komponen keep-alive, kami boleh mengurangkan pemaparan berulang halaman dengan berkesan dan meningkatkan prestasi dan pengalaman pengguna halaman. Pada masa yang sama, kami juga boleh menggunakan termasuk dan mengecualikan atribut, fungsi cangkuk dan fungsi lain untuk mengoptimumkan lagi pemaparan halaman. Saya harap artikel ini akan membantu anda memahami dan menggunakan komponen keep-alive Vue.

Atas ialah kandungan terperinci Cara mengurangkan pemaparan berulang halaman melalui komponen kekal hidup Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!