Cara menggunakan keep-alive vue untuk mengoptimumkan prestasi halaman

Cara menggunakan Vue's keep-alive untuk mengoptimumkan prestasi halaman

Pengenalan:
Apabila membangunkan projek Vue, kami sering menghadapi situasi: apabila bertukar antara halaman, kami tidak mahu memusnahkan contoh komponen halaman semasa, tetapi cache ia untuk meningkatkan prestasi pada lawatan anda yang seterusnya. Vue menyediakan komponen keep-alive, yang boleh melaksanakan fungsi caching komponen dengan mudah Artikel ini akan memperkenalkan secara terperinci cara menggunakan keep-alive untuk mengoptimumkan prestasi halaman.

1 Pengenalan kepada komponen keep-alive
Komponen keep-alive Vue ialah komponen abstrak yang boleh cache komponen yang dibalutnya dan secara langsung membuat kejadian komponen dalam cache pada lawatan seterusnya, mengelakkan penciptaan dan pemusnahan komponen berulang. seterusnya meningkatkan prestasi.

2. Penggunaan asas keep-alive
Menggunakan komponen keep-alive adalah sangat mudah Anda hanya perlu meletakkan tag di luar komponen yang perlu dicache, contohnya:

<template>
  <div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

kod di atas, ialah saluran keluar penghalaan yang disediakan oleh Vue Router Kami boleh menggantikannya dengan mana-mana komponen yang perlu dicache.

3. Sifat dan peristiwa keep-alive
keep-alive menyediakan beberapa sifat dan peristiwa untuk mengawal dan memantau kitaran hayat cache komponen.

1. Atribut
   komponen kekal hidup mempunyai dua atribut utama:

• termasuk: tatasusunan yang menyatakan nama komponen yang perlu dicache. Hanya komponen yang ditentukan oleh atribut include akan dicache, komponen lain tidak akan dicache. Contohnya:

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

  Dalam kod di atas, hanya komponen bernama Home dan About akan dicache, komponen lain tidak akan dicache.

• kecualikan: Tentukan tatasusunan nama komponen yang tidak perlu dicache. Komponen yang ditentukan oleh atribut exclude tidak akan dicache, tetapi komponen lain akan dicache. Contohnya:

  <keep-alive :exclude="['Login']">
  <router-view></router-view>
  </keep-alive>

  Dalam kod di atas, komponen bernama Log masuk tidak akan dicache, tetapi komponen lain akan dicache.

2. Events
   komponen kekal hidup menyediakan dua acara untuk memantau kitaran hayat komponen cache:

• diaktifkan: dicetuskan apabila komponen diaktifkan. Contohnya:

  <keep-alive @activated="handleActivated">
  <router-view></router-view>
  </keep-alive>
  
  methods: {
  handleActivated() {
    console.log('Component activated');
  }
  }

  Dalam kod di atas, apabila komponen diaktifkan, kaedah handleActivated akan dipanggil untuk mencetak log.

• dinyahaktifkan: dicetuskan apabila komponen dinyahaktifkan. Contohnya:

  <keep-alive @deactivated="handleDeactivated">
  <router-view></router-view>
  </keep-alive>
  
  methods: {
  handleDeactivated() {
    console.log('Component deactivated');
  }
  }

  Dalam kod di atas, apabila komponen dinyahaktifkan, kaedah handleDeactivated akan dipanggil untuk mencetak log.

4. Contoh Demonstrasi
Di bawah kami menggunakan contoh praktikal untuk menunjukkan cara menggunakan keep-alive untuk mengoptimumkan prestasi halaman.

1. Buat projek Vue dan pasang Penghala Vue:

   vue create keep-alive-demo
   cd keep-alive-demo
   vue add router

2. Ubah suai fail src/App.vue dan bungkus dalam tag fail src/router/index.js, tambahkan dua laluan, sepadan dengan dua komponen yang perlu dicache:

   <template>
     <div id="app">
    <keep-alive>
      <router-view/>
    </keep-alive>
     </div>
   </template>

3. Buat komponen Home.vue dan About.vue dalam direktori src/views dan isikan kandungan:

   Home.vue:

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';

Vue.use(VueRouter);

const routes = [
  {
 path: '/',
 name: 'Home',
 component: Home,
  },
  {
 path: '/about',
 name: 'About',
 component: About,
  },
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;

4. 
   About.vue:

   <template>
     <div>
    <h1>Home</h1>
    <button @click="handleButtonClick">Click me</button>
     </div>
   </template>
   
   <script>
   export default {
     methods: {
    handleButtonClick() {
      console.log('Button clicked');
    },
     },
   };
   </script>

   Setakat ini, kami telah melengkapkan contoh mudah menggunakan keep-alive untuk mengoptimumkan prestasi halaman.

   Kesimpulan:

   Dengan menggunakan komponen keep-alive Vue, kami boleh melaksanakan fungsi caching komponen dengan mudah, dengan itu meningkatkan prestasi pemaparan halaman. Dalam projek sebenar, beberapa komponen yang kerap diakses dan dikendalikan boleh dicache mengikut keperluan untuk mengelakkan penciptaan dan pemusnahan komponen berulang serta mengoptimumkan pengalaman interaktif pengguna. Saya harap artikel ini akan membantu anda memahami dan menggunakan keep-alive!

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