Comment réduire le rendu répété des pages grâce au composant keep-alive de Vue

Comment réduire le rendu répété des pages grâce au composant keep-alive de Vue

Dans Vue.js, le rendu répété des pages est un problème courant. Lorsque nous changeons de page ou sautons entre plusieurs composants, Vue restituera l'intégralité de l'arborescence des composants, et ce processus peut consommer beaucoup de ressources informatiques et de temps. Pour résoudre ce problème, Vue fournit un composant intégré appelé keep-alive, qui peut nous aider à réduire le rendu répété de la page. Le composant

keep-alive est un composant abstrait fourni par Vue pour la mise en cache des sous-composants avec état. Sa fonction est de mettre en cache les sous-composants pour éviter qu'ils ne soient détruits et recréés, réduisant ainsi le coût du rendu répété de la page. Voyons comment utiliser le composant keep-alive pour optimiser les performances des pages.

Tout d'abord, nous devons utiliser le composant keep-alive dans le composant parent pour envelopper les composants enfants qui doivent être mis en cache. Par exemple, nous avons un sous-composant appelé Accueil que nous souhaitons mettre en cache lors du changement de page. Nous pouvons l'envelopper dans un composant keep-alive, comme indiqué ci-dessous :

<template>
  <keep-alive>
    <Home />
  </keep-alive>
</template>

Ensuite, nous pouvons optimiser davantage le rendu de la page en définissant les propriétés du composant keep-alive. Le composant keep-alive fournit des attributs d'inclusion et d'exclusion pour spécifier quels composants doivent être mis en cache et quels composants n'ont pas besoin d'être mis en cache.

Par exemple, si nous voulons mettre en cache tous les sous-composants, nous pouvons définir l'attribut include sur "*" :

<template>
  <keep-alive :include="['*']">
    ...
  </keep-alive>
</template>

Si nous voulons uniquement mettre en cache des sous-composants spécifiques, nous pouvons définir l'attribut include sur un tableau contenant le nom requis du sous-composant mis en cache :

<template>
  <keep-alive :include="['Home', 'About']">
    ...
  </keep-alive>
</template>

En plus de l'attribut include, le composant keep-alive fournit également l'attribut d'exclusion, qui est utilisé pour spécifier quels composants n'ont pas besoin d'être mis en cache. Semblable à l'attribut include, l'attribut exclure peut être défini sur "*" pour exclure tous les composants, ou sur un tableau contenant les noms des sous-composants qui n'ont pas besoin d'être mis en cache.

Lors de l'utilisation du composant keep-alive, nous pouvons également utiliser la fonction hook qu'il fournit pour optimiser davantage le rendu de la page. Le composant keep-alive a deux fonctions de hook : activée et désactivée. La fonction hook activée est appelée lorsque le composant est activé, tandis que la fonction hook désactivée est appelée lorsque le composant est désactivé.

Nous pouvons exécuter une certaine logique dans la fonction hook activée qui doit être exécutée lorsque le composant enfant est activé par le cache. Par exemple, vous pouvez envoyer une requête réseau dans la fonction hook activée pour mettre à jour les données du sous-composant. De même, dans la fonction hook désactivée, vous pouvez exécuter une certaine logique qui doit être exécutée lorsque le sous-composant est désactivé, comme la suppression des données mises en cache, etc.

Ce qui suit est un exemple d'utilisation de la fonction hook activée :

<template>
  <keep-alive :include="['Home']">
    <Home />
  </keep-alive>
</template>

<script>
export default {
  components: {
    Home
  },
  activated() {
    // 在子组件被激活时执行的逻辑
    this.$http.get('/api/data')
      .then(response => {
        this.data = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
}
</script>

En utilisant le composant keep-alive, nous pouvons réduire efficacement le rendu répété de la page et améliorer les performances et l'expérience utilisateur de la page. Dans le même temps, nous pouvons également utiliser des attributs d'inclusion et d'exclusion, des fonctions de hook et d'autres fonctions pour optimiser davantage le rendu de la page. J'espère que cet article vous aidera à comprendre et à utiliser le composant keep-alive de 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!