Comment éviter l'actualisation de la page lors du changement d'onglet de menu dans Vue

Dans le développement front-end, il est souvent nécessaire d'implémenter la fonction de changement d'onglet de la barre de menu. Avec la popularité des applications monopage, de plus en plus de pages Web sont développées à l'aide du framework Vue. Le framework Vue fournit une riche bibliothèque de composants et des méthodes de liaison rapides pour aider les développeurs à implémenter facilement de nombreuses fonctions. Parmi eux, le composant de commutation d'onglets de Vue a été largement utilisé dans le développement.

Cependant, lors de la mise en œuvre de la fonction de changement d'onglet de la barre de menu, nous rencontrons souvent un problème : à chaque changement d'onglet, la page sera rechargée, ce qui entraînera une interruption du fonctionnement de l'utilisateur. Alors, comment éviter l'actualisation de la page lors du changement d'onglet de menu dans Vue ? Cet article présentera une solution possible.

1. Analyse du problème

Dans le framework Vue, des méthodes de changement d'onglet courantes peuvent être obtenues via la classe de liaison dynamique v-bind. Par exemple, nous souhaitons implémenter une barre de menu simple avec trois commutateurs d'onglets, et le contenu de la page changera à mesure que les onglets changeront. À l'heure actuelle, nous pouvons écrire comme ceci :

    <div id="app">
        <ul>
            <li v-for="(item, index) in items" :class="{ active: index === activeIndex }" @click="handleClick(index)">{{ item }}</li>
        </ul>
        <div>{{ content }}</div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                activeIndex: 0,
                content: '',
                items: ['Tab1', 'Tab2', 'Tab3']
            },
            methods: {
                handleClick(index) {
                    this.activeIndex = index
                    this.fetchContent()
                },
                fetchContent() {
                    // 模拟异步请求
                    setTimeout(() => {
                        this.content = `Tab${this.activeIndex + 1} content`
                    }, 1000)
                }
            }
        })
    </script>

Dans ce code, nous utilisons l'instruction v-bind pour lier dynamiquement l'attribut de classe de la balise li. Parmi eux, activeIndex est utilisé pour marquer l'onglet actuellement sélectionné et la méthode fetchContent est utilisée pour obtenir le contenu sous l'onglet correspondant. Lorsque l'utilisateur clique sur un onglet, la méthode handleClick met à jour activeIndex et déclenche la méthode fetchContent pour obtenir le contenu sous l'onglet correspondant.

Un tel code a certaines fonctions et facilité d'utilisation, mais le contenu sera récupéré à chaque fois que vous cliquerez sur l'onglet, ce qui peut entraîner une baisse de l'expérience utilisateur. Afin d'éviter ce problème, nous devons utiliser le composant keep-alive fourni dans Vue pour mettre en cache le contenu et éviter des acquisitions répétées.

2. Le rôle du composant keep-alive

Vue fournit le composant keep-alive, qui peut atteindre l'objectif de mise en cache des composants. Lors de l'utilisation de composants keep-alive, si un composant est enveloppé dans un composant keep-alive, lorsque le composant est détruit, son état sera conservé jusqu'à son prochain rendu. En d’autres termes, le composant ne sera pas recréé et le dom ne sera pas remonté. Le composant

keep-alive possède deux crochets de cycle de vie spéciaux : activé et désactivé. Lorsqu'un composant du cache de composants keep-alive dans la page est activé (c'est-à-dire que le composant est actif dans le cache et est réutilisé), la fonction hook activée sera appelée. De même, lorsque le composant mis en cache est désactivé (c'est-à-dire inactif), la fonction hook désactivée sera appelée.

Dans le scénario de changement d'onglet de menu, nous pouvons appliquer le composant keep-alive au composant qui doit être mis en cache et activer le cache via l'attribut spécial "keep-alive". Le code est le suivant :

    <div id="app">
        <ul>
            <li v-for="(item, index) in items" :class="{ active: index === activeIndex }" @click="handleClick(index)">{{ item }}</li>
        </ul>
        <keep-alive>
            <div v-if="showContent">{{ content }}</div>
        </keep-alive>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                activeIndex: 0,
                content: '',
                items: ['Tab1', 'Tab2', 'Tab3'],
                showContent: false
            },
            methods: {
                handleClick(index) {
                    this.activeIndex = index
                    this.showContent = true
                    this.fetchContent()
                },
                fetchContent() {
                    // 模拟异步请求
                    setTimeout(() => {
                        this.content = `Tab${this.activeIndex + 1} content`
                    }, 1000)
                }
            },
            watch: {
                activeIndex() {
                    this.showContent = false
                }
            }
        })
    </script>

Nous avons ajouté le composant keep-alive au code et y avons enveloppé les composants qui doivent être conservés. Dans la méthode fetchContent, avant chaque mise à jour de contenu, nous devons définir l'attribut showContent sur true pour déclencher la mise en cache. Lorsque l'attribut activeIndex change, nous devons définir showContent sur false pour éviter les erreurs inattendues causées par un cache en suspens.

De cette façon, lorsque l'utilisateur change d'onglet, si le contenu de l'onglet a été mis en cache, la page ne sera pas actualisée, et l'expérience utilisateur est également garantie.

3. Optimisation

En analysant et en optimisant davantage le code, nous pouvons obtenir une meilleure expérience utilisateur et une meilleure lisibilité du code.

Tout d'abord, lorsqu'il y a de nombreux éléments de menu, nous pouvons éviter d'écrire beaucoup de code à la main en générant dynamiquement des composants. Nous pouvons modéliser des éléments via l'attribut calculé, puis référencer cet attribut dans la vue pour obtenir l'effet de générer automatiquement des éléments de menu. Par exemple :

  <div id="app">
      <ul>
          <li v-for="(item, index) in tabList" :class="{active: index === activeIndex}" @click="handleTabClick(index)">{{item}}</li>
      </ul>
      <keep-alive>
          <component :is="contentComponent"></component>
      </keep-alive>
  </div>
  <script>
      new Vue({
          el: '#app',
         data: {
              activeIndex: 0,
              tabList: ['武汉', '北京', '上海'],
              contentMap: {
                  武汉: {template: '<div>武汉是我的家乡</div>'},
                  北京: {template: '<div>北京欢迎您</div>'},
                  上海: {template: '<div>上海滩最美</div>'}
              }
          },
          computed: {
              contentComponent() {
                  return this.contentMap[this.tabList[this.activeIndex]]
              }
          },
          methods: {
              handleTabClick(index) {
                  this.activeIndex = index
              }
          }
      })
  </script>

Grâce à l'objet contentMap, nous pouvons modéliser le contenu correspondant à chaque onglet. Dans l'attribut calculé, nous utilisons la forme a[b] pour obtenir le composant correspondant. Dans la méthode handleTabClick, la mise à jour de la valeur de activeIndex déclenche le cache du composant.

Ensuite, nous pouvons optimiser l'effet cache. Une fois le composant mis en cache, le composant lit les données de la mémoire et réutilise le DOM précédemment généré. Cependant, les composants mis en cache n'acceptent aucun changement d'état, y compris les accessoires et les événements, jusqu'à ce que le composant soit complètement détruit. Si nous devons modifier un état dans le composant mis en cache, nous pouvons utiliser des fonctions hook activées et désactivées. Dans le même temps, afin d'éviter la réinitialisation des données dans la zone de saisie, nous devons utiliser la directive v-model pour lier les données au composant qui traite réellement les données au lieu du composant mis en cache. Par exemple :

  <div id="app">
      <ul>
          <li v-for="(item, index) in tabList" :class="{active: index === activeIndex}" @click="handleTabClick(index)">{{item}}</li>
      </ul>
      <keep-alive>
          <component :is="contentComponent" v-model="dataValid"></component>
      </keep-alive>
  </div>
  <script>
      const WUHAN_CONTENT = {
          template: `
              <div>
                  <input v-model="data">
                  <button @click="checkData">检查数据</button>
                  <p>{{tip}}</p>
              </div>
          `,
          data() {
              return {
                  data: '',
                  tip: ''
              }
          },
          watch: {
              data() {
                  this.tip = ''
              }
          },
          methods: {
              checkData() {
                  this.tip = this.dataValid(this.data) ? '数据有效' : '数据无效'
              }
          },
      }
      const BEIJING_CONTENT = {template: '<div>北京欢迎您</div>'}
      const SHANGHAI_CONTENT = {template: '<div>上海滩最美</div>'}

      new Vue({
          el: '#app',
          data: {
              activeIndex: 0,
              tabList: ['武汉', '北京', '上海'],
              contentMap: {
                  武汉: WUHAN_CONTENT,
                  北京: BEIJING_CONTENT,
                  上海: SHANGHAI_CONTENT
              },
              dataValid(value) {
                  return value.trim().length > 0
              }
          },
          computed: {
              contentComponent() {
                  return this.contentMap[this.tabList[this.activeIndex]]
              }
          },
          methods: {
              handleTabClick(index) {
                  this.activeIndex = index
              }
          }
      })
   </script>

Dans cet exemple, nous avons mis en place une fonction de validation des données dataValid pour vérifier les données de la zone de saisie dataValid ne peut être appelée que dans le composant parent, qui est la directive v-model. . Exiger. Dans le même temps, dans le composant WUHAN_CONTENT, nous utilisons la méthode watch pour surveiller les modifications des données dans la zone de saisie et obtenons l'effet de vérification des données en temps réel en mettant à jour la pointe. Après ces optimisations, notre fonction de changement d'onglet de menu peut être parfaitement affichée sur la page.

4. Résumé

Cet article présente comment éviter les problèmes d'actualisation lors de l'implémentation de la fonction de changement d'onglet de menu dans le framework Vue, et implémente la page via l'application du keep- composant vivant Mise en cache du contenu. Dans le même temps, nous avons optimisé le programme et amélioré son efficacité et son expérience utilisateur.

Dans le développement de Vue, le changement d'onglet est une fonction courante pendant le processus d'implémentation, en plus des méthodes présentées dans cet article, il existe de nombreuses autres méthodes d'implémentation, telles que element-ui et iview, les bibliothèques de composants de. deux frameworks d'interface utilisateur Vue-router fournit également des API et des composants associés. Chaque méthode a ses propres caractéristiques, avantages et inconvénients. Dans le développement réel, nous devons choisir la méthode la plus appropriée pour implémenter la fonction de changement d'onglet de menu en fonction des besoins réels et des environnements de développement.

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!