Utilisez le keep-alive de vue pour améliorer l'effet de mise en cache des pages

Utilisez le keep-alive de Vue pour améliorer l'effet de mise en cache des pages

Dans le processus de développement d'applications Web, nous rencontrons souvent le problème du changement de page, en particulier dans les scénarios impliquant des changements fréquents, recharger la page à chaque fois entraînera une dégradation des performances. Pour résoudre ce problème, Vue fournit un composant appelé keep-alive pour mettre en cache les composants ou les routes qui ont été rendus.

keep-alive est un composant abstrait fourni avec Vue. Il peut être enroulé autour du composant qui doit être mis en cache lorsque le composant est commuté, l'instance du composant ne sera pas détruite, mais sera mise en cache pour être réutilisée la prochaine fois. .

L'utilisation de keep-alive est très simple, il suffit d'ajouter la balise keep-alive au composant qui doit être mis en cache. Ce qui suit est un exemple simple pour montrer comment utiliser keep-alive pour améliorer l'effet de mise en cache des pages.

Tout d'abord, nous créons une instance Vue simple et définissons deux composants : Accueil et À propos.

<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>

Dans le code ci-dessus, nous utilisons Vue Router pour implémenter la commutation de route. Deux liens de navigation sont implémentés via la balise router-link, pointant respectivement vers les composants Accueil et À propos. Dans la balise keep-alive, nous utilisons la vue du routeur du composant dynamique de Vue pour restituer le composant actuellement activé et l'envelopper dans le composant keep-alive.

Ensuite, nous écrivons respectivement le modèle et le code de script pour les composants Accueil et À propos.

<!-- 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>

Dans les composants Accueil et À propos, nous utilisons les fonctions de hook de cycle de vie activées et désactivées fournies par Vue pour écouter les événements d'activation et de désactivation des composants et imprimer les informations pertinentes sur la console.

Enfin, nous devons créer un fichier de configuration contenant les informations de routage et l'introduire dans l'instance 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

Maintenant, nous pouvons exécuter l'application et changer de page. Vous pouvez observer dans la console que lors du changement de composant, les fonctions de hook de cycle de vie activées et désactivées sont déclenchées.

En utilisant le composant keep-alive, nous pouvons voir que lors du changement de composant, les composants mis en cache ne seront pas détruits, mais seront réutilisés directement. Cela évite les processus de rendu et d'initialisation répétés, améliorant considérablement la vitesse et les performances de chargement des pages.

Résumé :
L'utilisation du composant keep-alive de Vue peut améliorer efficacement l'effet de mise en cache des pages, en particulier dans les scénarios de changement fréquents. Grâce à un exemple de code simple, nous pouvons apprendre à utiliser keep-alive pour mettre en cache les composants rendus. Keep-alive est un outil très utile pour optimiser les performances et l'expérience utilisateur des applications Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!