Comment le composant keep-alive de Vue améliore la fluidité du changement de page utilisateur

Comment le composant keep-alive de Vue améliore la fluidité du changement de page utilisateur

Dans les applications Web modernes, il est très courant que les utilisateurs changent fréquemment de page en raison des opérations de l'utilisateur. Des changements de page aussi fréquents peuvent entraîner des problèmes de performances tels que le nouveau rendu des pages et le rechargement des composants, rendant l'expérience de changement de page moins fluide. En tant que framework frontal populaire, Vue.js fournit un composant appelé keep-alive, qui peut nous aider à améliorer la fluidité du changement de page utilisateur.

La fonction du composant keep-alive est de mettre en cache l'état du composant pour éviter un rendu répété du composant. Lorsqu'un composant est enveloppé dans un composant keep-alive, il est mis en cache plutôt que détruit. De cette façon, chaque fois que vous basculez vers le même composant, Vue lira directement l'état du composant à partir du cache, économisant ainsi le temps de nouveau rendu du composant.

Ci-dessous, nous utilisons un exemple simple pour illustrer comment le composant keep-alive améliore la fluidité du changement de page utilisateur.

Supposons que nous ayons deux composants : ComponentA et ComponentB. ComponentA est un composant de liste utilisé pour afficher certaines données ; ComponentB est un composant de détails utilisé pour afficher des informations détaillées sur un élément de la liste. Lorsque l'utilisateur passe à la page de détails en cliquant sur un élément de la liste, nous souhaitons conserver la position de défilement de la page de liste inchangée.

Nous introduisons d'abord le composant keep-alive dans App.vue et définissons l'attribut name sur la route correspondante pour spécifier l'identifiant du composant mis en cache.

<template>
  <div>
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

Ensuite, dans le composant de liste ComponentA, nous devons modifier le contenu du modèle et afficher les éléments de la liste via un parcours en boucle.

<template>
  <ul>
    <li v-for="item in list" :key="item.id" @click="showDetail(item)">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    }
  },
  methods: {
    showDetail(item) {
      // 切换到详情页，并传递选中项的数据
      this.$router.push({
        name: 'Detail',
        params: { item }
      })
    }
  }
}
</script>

Dans le composant de détail ComponentB, nous enregistrons la position de défilement lorsque la page est chargée dans la fonction hook montée, puis restaurons la position dans la fonction hook activée.

<template>
  <div>
    <h2>{{ selectedItem.name }}</h2>
    <p>Details: {{ selectedItem.details }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItem: {}
    }
  },
  mounted() {
    // 保存页面加载时的滚动位置
    this.$store.commit('saveScrollPosition', window.pageYOffset)
  },
  activated() {
    // 恢复页面切换时的滚动位置
    window.scrollTo(0, this.$store.state.scrollPosition)
  },
  created() {
    // 获取传递过来的选中项数据
    this.selectedItem = this.$route.params.item
  }
}
</script>

Enfin, nous ajoutons la route du ComponentB dans la configuration de routage et spécifions l'attribut name.

import Vue from 'vue'
import VueRouter from 'vue-router'
import ComponentA from '@/components/ComponentA.vue'
import ComponentB from '@/components/ComponentB.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'ComponentA',
    component: ComponentA
  },
  {
    path: '/detail',
    name: 'Detail',
    component: ComponentB
  }
]

const router = new VueRouter({
  routes
})

export default router

En utilisant le composant keep-alive, nous pouvons conserver la position de défilement de la page de liste lorsque l'utilisateur change de page, offrant ainsi une meilleure expérience utilisateur. En effet, le composant liste est mis en cache plutôt que restitué. Lorsque nous reviendrons à la page de liste, l'état du composant sera restauré directement sans recharger les données et afficher le composant.

En résumé, le composant keep-alive de Vue peut améliorer la fluidité du changement de page utilisateur. En mettant en cache l'état du composant, il peut réduire le nouveau rendu du composant, améliorant ainsi l'expérience utilisateur. Dans les scénarios où les performances de changement de page doivent être améliorées, l’utilisation rationnelle des composants keep-alive sera un bon choix.

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!