Comment utiliser keep-alive pour mettre en cache les composants dynamiques dans Vue

Vue est un framework JavaScript populaire pour créer des applications Web modernes. L'une des caractéristiques de Vue est sa flexibilité et son efficacité. Parmi eux, keep-alive est une fonction fournie par Vue, qui est utilisée pour mettre en cache les composants dynamiques et améliorer les performances des applications. Dans cet article, nous discuterons de l'utilisation de keep-alive dans Vue.

Qu'est-ce que le keep-alive ?

Dans Vue, lorsqu'un composant est détruit, son état et ses données sont également détruits. Cependant, nous devons parfois conserver l'état et les données d'un composant lors du changement de composant pour améliorer l'expérience utilisateur et les performances des applications. C’est à ce moment-là que le keep-alive entre en jeu. keep-alive est un composant abstrait fourni par Vue pour mettre en cache les composants dynamiques et conserver leur état et leurs données lorsque le composant est commuté.

Utiliser keep-alive

Utiliser keep-alive dans Vue est très simple. Il suffit d'encapsuler les composants qui doivent être mis en cache dans la balise . Par exemple, nous avons un composant dynamique qui utilise la technologie des composants asynchrones pour charger dynamiquement :

<template>
  <div>
    <button @click="showComponentA">Show Component A</button>
    <button @click="showComponentB">Show Component B</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: null
    }
  },

  methods: {
    showComponentA() {
      this.currentComponent = () => import('./ComponentA.vue')
    },

    showComponentB() {
      this.currentComponent = () => import('./ComponentB.vue')
    }
  }
}
</script>

Dans ce composant, nous avons deux boutons pour changer l'affichage des composants ComponentA et ComponentB. currentComponent charge dynamiquement les composants en fonction des événements de clic sur le bouton. Nous devons maintenant utiliser keep-alive pour mettre en cache ces deux composants. Enveloppez simplement la balise dans la balise  :

<template>
  <div>
    <button @click="showComponentA">Show Component A</button>
    <button @click="showComponentB">Show Component B</button>
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

Maintenant, lorsque nous changeons de composant, le L'état et les données du composant seront conservés et ne seront pas détruits.

Options de configuration supplémentaires

En plus d'une utilisation simple, Vue fournit également des options de configuration pour contrôler davantage le comportement de keep-alive.

exclude et include

exclude et include sont deux propriétés booléennes utilisées pour contrôler les composants mis en cache keep-alive. exclure est utilisé pour spécifier les composants qui doivent être exclus du cache, tandis que include est utilisé pour spécifier que seuls des composants spécifiques sont mis en cache. Ils sont généralement utilisés avec des composants dynamiques, par exemple :

<template>
  <div>
    <button @click="showComponentA">Show Component A</button>
    <button @click="showComponentB">Show Component B</button>
    <keep-alive :exclude="['ComponentA']">
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

Dans cet exemple, nous utilisons l'attribut d'exclusion pour exclure le composant ComponentA, afin qu'il ne soit pas mis en cache.

max et min

max et min sont deux propriétés numériques utilisées pour contrôler le nombre de composants dynamiques pour le cache maximum et minimum de maintien. Lorsque le maximum est dépassé, les composants inutilisés les plus anciens seront détruits jusqu'à ce que le nombre de composants mis en cache atteigne le minimum. Par exemple :

<template>
  <div>
    <button @click="showComponentA">Show Component A</button>
    <button @click="showComponentB">Show Component B</button>
    <keep-alive :max="5" :min="2">
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

Dans cet exemple, nous utilisons l'attribut max pour spécifier un cache maximum de 5 composants, et l'attribut min pour spécifier un cache minimum de 2 composants.

Conclusion

keep-alive est une fonctionnalité très puissante fournie par Vue qui peut nous aider à améliorer les performances et l'expérience utilisateur de notre application. Dans cet article, nous avons présenté comment utiliser keep-alive dans Vue pour mettre en cache les composants dynamiques et discuté de quelques options de configuration supplémentaires. Nous pouvons désormais gérer plus efficacement l'état et les données des composants dans les applications Vue.

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!