Utilisez le composant keep-alive de Vue pour implémenter la stratégie de mise à jour du cache de pages

Utilisez le composant keep-alive de Vue pour mettre en œuvre une stratégie de mise à jour du cache de pages

Introduction :
Lors du développement d'applications Web, il est souvent nécessaire de gérer le cache de pages et les stratégies de mise à jour. Basé sur l'application SPA (Single-Page Application) de Vue, nous pouvons utiliser le composant keep-alive de Vue pour contrôler la mise en cache et les mises à jour des pages. Cet article expliquera comment utiliser le composant keep-alive de Vue pour implémenter la stratégie de mise à jour du cache de pages et fournira des exemples de code correspondants.

1. Qu'est-ce que le composant Keep-alive ? Le composant keep-alive de
Vue est un composant abstrait utilisé pour mettre en cache les composants. Il peut mettre en cache le composant avant qu'il ne soit détruit afin qu'il puisse être lu directement à partir du cache lorsque le composant est à nouveau rendu, améliorant ainsi la vitesse de chargement des pages et l'expérience utilisateur.

2. Comment utiliser Keep-alive
L'utilisation de keep-alive est très simple, il suffit d'envelopper le composant à mettre en cache dans la balise 7c9485ff8c3cba5ae9343ed63c2dc3f7

<template>
  <div>
    <keep-alive>
      <!-- 缓存的组件放在这里 -->
    </keep-alive>
  </div>
</template>

3. Stratégie de mise en cache Keep-alive

1. attribut include : spécifiez le nom du composant ou l'instance de composant qui doit être mise en cache. Seuls les composants spécifiés par include seront mis en cache. Attribut

<template>
  <div>
    <keep-alive :include="['ComponentA', ComponentB]">
      <router-view></router-view> <!-- 嵌套路由视图 -->
    </keep-alive>
  </div>
</template>

2. exclude : spécifiez les noms de composants ou les instances de composants qui n'ont pas besoin d'être mis en cache. Les composants spécifiés par exclusion ne seront pas mis en cache. Attribut

<template>
  <div>
    <keep-alive :exclude="['ComponentC', ComponentD]">
      <router-view></router-view> <!-- 嵌套路由视图 -->
    </keep-alive>
  </div>
</template>

3. max : Spécifie le nombre maximum de composants mis en cache. Lorsque le nombre de composants mis en cache dépasse le nombre spécifié par max, le premier composant mis en cache sera détruit.

<template>
  <div>
    <keep-alive :max="10">
      <router-view></router-view> <!-- 嵌套路由视图 -->
    </keep-alive>
  </div>
</template>

4. Stratégie de mise à jour Keep-Alive
Par défaut, les composants mis en cache ne seront pas restitués lorsque le routage est changé. Si nous devons restituer les composants mis en cache lors du routage des commutateurs, nous pouvons utiliser la stratégie suivante.

1. Changements dans l'état interne du composant
   Lorsque l'état interne du composant change, le composant actuel sera restitué.

export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

2. Déclarez la fonction de hook beforeRouteUpdate
   Déclarez la fonction de hook beforeRouteUpdate dans le composant Lorsque l'itinéraire est commuté, le composant mis en cache appellera la fonction de hook.

export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  beforeRouteUpdate(to, from, next) {
    next();
  }
};

Dans la fonction de hook beforeRouteUpdate, nous pouvons décider de réexécuter certaines logiques en fonction des différentes conditions des paramètres to et from. Par exemple, les données doivent être réacquises lorsque le routage est changé.

5. Exemple de code
Ce qui suit est un exemple de code qui utilise le composant keep-alive de Vue pour implémenter la stratégie de mise à jour du cache de page :

<template>
  <div>
    <keep-alive :include="['ComponentA', 'ComponentB']">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  beforeRouteUpdate(to, from, next) {
    this.count = 0; // 路由切换时重置count为0
    next();
  }
};
</script>

6 Résumé
L'utilisation du composant keep-alive de Vue peut facilement implémenter la stratégie de mise en cache et de mise à jour des pages. Nous pouvons contrôler les composants qui doivent être mis en cache via les attributs d'inclusion et d'exclusion, ainsi que le nombre de composants mis en cache via l'attribut max. Par défaut, les composants mis en cache ne seront pas restitués, mais les composants peuvent être restitués via des modifications de l'état interne du composant et de la fonction de hook beforeRouteUpdate.

J'espère que grâce à l'introduction de cet article, vous pourrez mieux comprendre et appliquer le composant keep-alive de Vue pour améliorer la vitesse de chargement des pages et l'expérience utilisateur.

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!