Comment utiliser keep-alive pour optimiser les performances des composants dans Vue

Comment utiliser keep-alive pour optimiser les performances des composants dans Vue

À mesure que les applications Web deviennent plus complexes, l'optimisation des performances frontales devient de plus en plus importante. Dans le framework Vue, nous pouvons optimiser les performances des composants en utilisant des composants keep-alive. keep-alive est un composant intégré fourni par Vue. Il peut mettre en cache des instances de composants encapsulés pour éviter la création et la destruction répétées, améliorant ainsi la vitesse de réponse de l'application. Dans cet article, nous présenterons comment utiliser keep-alive pour optimiser les performances des composants.

1. Utilisez keep-alive pour envelopper les composants qui doivent être mis en cache

Tout d'abord, nous devons envelopper les composants qui doivent être mis en cache dans des composants keep-alive. Par exemple, nous avons un composant nommé "Dashboard", et nous voulons conserver son état après être passé à d'autres pages, alors nous pouvons envelopper le composant de la manière suivante :

<template>
  <div>
    <keep-alive>
      <dashboard v-if="showDashboard" />
    </keep-alive>
    <button @click="toggleDashboard">Toggle Dashboard</button>
  </div>
</template>

<script>
import Dashboard from './Dashboard.vue';

export default {
  components: {
    Dashboard
  },
  data() {
    return {
      showDashboard: true
    };
  },
  methods: {
    toggleDashboard() {
      this.showDashboard = !this.showDashboard;
    }
  }
};
</script>

En encapsulant le composant Dashboard dans keep-alive, même si nous passons à d’autres pages puis revenons en arrière, l’état du composant Dashboard sera conservé.

2. Utilisez les fonctions de hook activées et désactivées pour enregistrer et effacer l'état

Lorsqu'un composant est mis en cache, il sera détruit, mais ne sera pas déchargé. Cela signifie que l'état du composant sera conservé et disponible lors de sa réactivation. Vue fournit des fonctions de hook activées et désactivées, et nous pouvons effectuer les opérations requises dans ces deux fonctions de hook.

Par exemple, nous avons un composant appelé "Dashboard" qui contient une logique qui doit être exécutée à chaque fois qu'il est activé, nous pouvons utiliser les fonctions hook activées et désactivées comme suit :

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Dashboard',
      count: 0
    };
  },
  activated() {
    this.title = 'Activated Dashboard';
  },
  deactivated() {
    this.title = 'Dashboard';
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

Chaque fois que le composant est activé, le la fonction hook activée sera appelée. Nous pouvons y effectuer certaines opérations requises, telles que la mise à jour des données du composant ou la nouvelle demande de données. Dans l'exemple ci-dessus, chaque fois que le composant Tableau de bord est activé, le titre sera mis à jour en « Tableau de bord activé ».

3. Spécifiez les composants mis en cache à l'aide des attributs d'inclusion et d'exclusion

Dans certains cas, nous pouvons souhaiter uniquement mettre en cache des composants spécifiques, ou nous pouvons ne pas vouloir mettre en cache des composants spécifiques. Vue fournit des attributs d'inclusion et d'exclusion, que nous pouvons utiliser pour spécifier les composants qui doivent être mis en cache et les composants qui n'ont pas besoin d'être mis en cache.

Par exemple, nous avons deux composants : Tableau de bord et Paramètres, et nous souhaitons mettre en cache le composant Tableau de bord mais pas le composant Paramètres, nous pouvons modifier le code comme suit :

<template>
  <div>
    <keep-alive :include="['dashboard']">
      <dashboard v-if="showDashboard" />
    </keep-alive>
    <settings v-if="showSettings" />
    <button @click="toggleDashboard">Toggle Dashboard</button>
    <button @click="toggleSettings">Toggle Settings</button>
  </div>
</template>

<script>
import Dashboard from './Dashboard.vue';
import Settings from './Settings.vue';

export default {
  components: {
    Dashboard,
    Settings
  },
  data() {
    return {
      showDashboard: true,
      showSettings: true
    };
  },
  methods: {
    toggleDashboard() {
      this.showDashboard = !this.showDashboard;
    },
    toggleSettings() {
      this.showSettings = !this.showSettings;
    }
  }
};
</script>

En définissant l'attribut include sur ['dashboard'] , nous disons à Vue Seul le composant nommé "dashboard" est mis en cache et aucun autre composant n'est mis en cache. Dans l'exemple ci-dessus, chaque fois que vous passez au composant Tableau de bord, puis passez à d'autres pages, l'état du composant Tableau de bord sera conservé, mais l'état du composant Paramètres ne sera pas conservé.

Résumé :

L'utilisation de composants keep-alive peut nous aider à optimiser les performances des applications Vue, à éviter la création et la destruction répétées de composants et à améliorer la vitesse de réponse de l'application. En encapsulant les composants qui doivent être mis en cache dans keep-alive et en utilisant des fonctions de hook activées et désactivées pour enregistrer et effacer l'état, nous pouvons mieux gérer l'état du composant. De plus, en utilisant les attributs d'inclusion et d'exclusion, nous pouvons spécifier plus précisément les composants qui doivent être mis en cache. J'espère que cet article vous aidera à utiliser keep-alive pour optimiser les performances des composants dans 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!