Comment utiliser keep-alive pour optimiser l'effet de changement d'itinéraire dans le projet vue

Comment utiliser keep-alive pour optimiser l'effet de changement d'itinéraire dans les projets vue

Dans les projets vue, le changement d'itinéraire est une opération courante. Cependant, lorsque nous changeons fréquemment d'itinéraire, nous constatons que les composants et les données sont rechargés à chaque fois que nous changeons, ce qui entraîne un chargement lent des pages et une mauvaise expérience utilisateur. Afin de résoudre ce problème, nous pouvons utiliser le composant keep-alive de vue pour optimiser l'effet de commutation de routage.

keep-alive est un composant abstrait fourni par Vue, qui peut être encapsulé en dehors du composant qui doit être mis en cache pour mettre en cache l'état du composant afin d'éviter un rendu répété du composant. Lorsque vous changez d'itinéraire, vous pouvez contrôler dynamiquement s'il faut activer la mise en cache en définissant l'attribut méta de l'itinéraire. Voyons ensuite comment utiliser keep-alive pour optimiser l'effet de changement de routage dans le projet vue.

1. Tout d'abord, ajoutez un attribut méta dans le fichier de configuration de routage

Dans chaque objet de route dans le fichier de configuration de routage (généralement router.js), ajoutez un attribut méta et définissez sa valeur sur true ou false pour contrôler si la mise en cache est activé. Par exemple :

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      keepAlive: true
    }
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: {
      keepAlive: false
    }
  }
]

2. Utilisez le composant keep-alive dans App.vue

En dehors de la balise dans App.vue, ajoutez la balise nécessite le nom du composant de mise en cache. Par exemple :

<template>
  <div id="app">
    <keep-alive :include="keepAliveComponents">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  computed: {
    keepAliveComponents() {
      // 获取带有meta.keepAlive属性的组件名
      const routes = this.$router.options.routes;
      const keepAliveComponents = routes
        .filter(route => route.meta && route.meta.keepAlive)
        .map(route => route.name);
      return keepAliveComponents;
    }
  }
};
</script>

Dans le code ci-dessus, nous utilisons l'attribut calculé keepAliveComponents pour obtenir le nom du composant avec l'attribut meta.keepAlive et le définissons sur la valeur de l'attribut include.

3. Utilisez les fonctions hook activées et désactivées dans les composants qui doivent être mis en cache

Dans les composants qui doivent être mis en cache, vous pouvez utiliser les fonctions hook activées et désactivées pour écouter les événements d'activation et de désactivation du composant. Dans l'événement d'activation, des demandes de données correspondantes ou d'autres opérations peuvent être effectuées ; dans l'événement de désactivation, les données peuvent être nettoyées ou un autre traitement peut être effectué. Par exemple :

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  activated() {
    // 组件激活时执行的操作
  },
  deactivated() {
    // 组件停用时执行的操作
  }
};
</script>

En utilisant les fonctions hook activées et désactivées, vous pouvez avoir un meilleur contrôle sur le cycle de vie du composant et le traitement des données.

4. Test de l'effet

Après avoir terminé les étapes ci-dessus, nous pouvons tester l'effet du maintien en vie. Lors du changement de route, si la propriété meta.keepAlive est vraie, le composant sera mis en cache sinon, il ne sera pas mis en cache ;

Résumé :

En utilisant le composant keep-alive de vue, nous pouvons facilement optimiser l'effet de changement de routage, éviter le chargement répété de composants et de données, et améliorer la vitesse de chargement des pages et l'expérience utilisateur. Dans le développement de projets, keep-alive doit être utilisé de manière flexible en fonction des scénarios réels et combiné avec des fonctions de hook activées et désactivées pour le traitement et l'optimisation des données.

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!