Développement d'entrée VUE3 : utilisation de keep-alive pour la mise en cache des composants

Vue est un framework front-end très populaire et Vue3 est la dernière version de Vue. Dans Vue3, l'utilisation de keep-alive pour la mise en cache des composants est une fonctionnalité très utile qui peut considérablement améliorer les performances du site Web.

keep-alive est un composant abstrait de Vue3, qui peut mettre en cache des composants pour éviter qu'ils ne soient créés et détruits à plusieurs reprises lors de commutations fréquentes. Cette fonctionnalité est très utile dans certains scénarios de composants nécessitant des changements fréquents, tels que les carrousels, les onglets, les boîtes de dialogue, etc.

Nous allons maintenant vous présenter comment utiliser keep-alive pour la mise en cache des composants dans Vue3.

1. Utilisation de base de keep-alive

1. Utilisation du composant keep-alive dans Vue3

Pour utiliser keep-alive, vous devez ajouter la balise 7c9485ff8c3cba5ae9343ed63c2dc3f7 Vue3, comme suit Montré :

<template>
  <keep-alive>
    <component :is="selected"></component>
  </keep-alive>
</template>

2. Mise en cache des composants

Après avoir ajouté la balise keep-alive, le composant actuellement affiché sera mis en cache. Lorsqu'un composant est commuté, Vue3 donnera la priorité au chargement du composant depuis le cache au lieu de recréer le composant, améliorant ainsi les performances du site Web.

2. Utilisation avancée de keep-alive

1. Configuration de la stratégie de cache

Par défaut, keep-alive mettra en cache tous les composants, mais parfois nous souhaitons uniquement mettre en cache des composants spécifiques. À ce stade, nous pouvons utiliser les attributs d'inclusion et d'exclusion pour configurer la stratégie de cache.

Dans le modèle, nous pouvons utiliser l'attribut include pour configurer les composants qui doivent être mis en cache :

<template>
  <keep-alive include="component-a, component-b">
    <component :is="selected"></component>
  </keep-alive>
</template>

De cette façon, seuls les composants nommés composant-a et composant-b seront mis en cache.

Dans le modèle, nous pouvons également utiliser l'attribut d'exclusion pour configurer les composants qui n'ont pas besoin d'être mis en cache :

<template>
  <keep-alive exclude="component-c">
    <component :is="selected"></component>
  </keep-alive>
</template>

De cette façon, le composant nommé composant-c ne sera pas mis en cache.

2. Cycle de vie du cache

Dans le cycle de vie des composants de cache, Vue3 fournit des fonctions de hook que nous pouvons utiliser pour surveiller le cycle de vie des composants de cache.

activated est une fonction de crochet qui se déclenche lorsque le composant est activé. La fonction hook activée est déclenchée lorsque le composant est chargé depuis le cache. Nous pouvons effectuer certaines opérations sur les composants du cache activés.

deactivated est une fonction de hook qui se déclenche lorsque le composant est désactivé. La fonction hook désactivée est déclenchée lorsque le composant est supprimé du cache actuel ou basculé vers un autre composant.

Vous pouvez définir ces deux fonctions de hook dans le composant pour surveiller le cycle de vie du composant de cache, comme indiqué ci-dessous :

<script>
export default {
  activated() {
    // 在缓存组件被激活时进行一些操作
  },
  deactivated() {
    // 在缓存组件被停用时进行一些操作
  }
}
</script>

III Résumé

L'utilisation de keep-alive pour la mise en cache des composants peut considérablement améliorer les performances du site Web, vue3 fournit une utilisation avancée, notamment la configuration de la politique de cache et la surveillance du cycle de vie du cache. Nous pouvons utiliser ces fonctionnalités de manière flexible en fonction de nos besoins pour optimiser les performances du site 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!