Gunakan vue's keep-alive untuk meningkatkan kesan caching halaman

Gunakan keep-alive Vue untuk menambah baik kesan caching halaman

Dalam proses membangunkan aplikasi web, kami sering menghadapi masalah penukaran halaman, terutamanya dalam senario yang melibatkan penukaran yang kerap, memuatkan semula halaman setiap kali akan membawa kepada kemerosotan prestasi. Untuk menyelesaikan masalah ini, Vue menyediakan komponen yang dipanggil keep-alive untuk caching komponen atau laluan yang telah diberikan.

keep-alive ialah komponen abstrak yang disertakan dengan Vue. Ia boleh dililitkan pada komponen yang perlu dicache Apabila komponen ditukar, contoh komponen tidak akan dimusnahkan, tetapi akan dicache untuk digunakan semula pada masa akan datang. .

Menggunakan keep-alive adalah sangat mudah, cuma tambah tag keep-alive pada komponen yang perlu dicache. Berikut ialah contoh mudah untuk menunjukkan cara menggunakan keep-alive untuk meningkatkan kesan caching halaman.

Pertama, kami mencipta contoh Vue yang mudah dan mentakrifkan dua komponen: Laman Utama dan Perihal.

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
import Home from './components/Home.vue'
import About from './components/About.vue'

export default {
  components: {
    Home,
    About
  }
}
</script>

Dalam kod di atas, kami menggunakan Penghala Vue untuk melaksanakan penukaran laluan. Dua pautan navigasi dilaksanakan melalui teg pautan penghala, masing-masing menunjuk ke komponen Laman Utama dan Perihal. Dalam teg keep-alive, kami menggunakan paparan penghala komponen dinamik Vue untuk memaparkan komponen yang sedang diaktifkan dan membungkusnya dalam komponen keep-alive.

Seterusnya, kami menulis templat dan kod skrip untuk komponen Laman Utama dan Perihal masing-masing.

<!-- Home.vue -->
<template>
  <div>
    <h1>Home</h1>
    <p>这是Home组件</p>
  </div>
</template>

<script>
export default {
  activated() {
    console.log('Home组件被激活')
  },
  deactivated() {
    console.log('Home组件被禁用')
  }
}
</script>

<!-- About.vue -->
<template>
  <div>
    <h1>About</h1>
    <p>这是About组件</p>
  </div>
</template>

<script>
export default {
  activated() {
    console.log('About组件被激活')
  },
  deactivated() {
    console.log('About组件被禁用')
  }
}
</script>

Dalam komponen Laman Utama dan Perihal, kami menggunakan fungsi cangkuk kitaran hayat yang diaktifkan dan dinyahaktifkan yang disediakan oleh Vue untuk mendengar peristiwa pengaktifan dan penyahaktifan komponen dan mencetak maklumat yang berkaitan pada konsol.

Akhir sekali, kita perlu mencipta fail konfigurasi yang mengandungi maklumat penghalaan dan memperkenalkannya ke dalam contoh Vue.

// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

export default router

Kini, kami boleh menjalankan aplikasi dan menukar halaman. Anda boleh perhatikan dalam konsol bahawa apabila menukar komponen, fungsi cangkuk kitaran hayat yang diaktifkan dan dinyahaktifkan dicetuskan.

Dengan menggunakan komponen keep-alive, kita dapat melihat bahawa apabila menukar komponen, komponen cache tidak akan dimusnahkan, tetapi akan digunakan semula secara langsung. Ini mengelakkan proses pemaparan dan permulaan yang berulang, meningkatkan kelajuan dan prestasi pemuatan halaman.

Ringkasan:
Menggunakan komponen keep-alive Vue boleh meningkatkan kesan caching halaman dengan berkesan, terutamanya dalam senario penukaran yang kerap. Melalui contoh kod mudah, kita boleh belajar cara menggunakan keep-alive untuk cache komponen yang diberikan. Keep-alive ialah alat yang sangat berguna untuk mengoptimumkan prestasi dan pengalaman pengguna aplikasi web.

Atas ialah kandungan terperinci Gunakan vue's keep-alive untuk meningkatkan kesan caching halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!