Comment mettre en cache les données dans Vue ?

Vue.js est un framework front-end populaire. Il adopte l'architecture MVVM (Model-View-ViewModel) et rend le développement front-end plus pratique et efficace grâce aux idées de rendu déclaratif et de composantisation. Au cours du processus de développement, nous rencontrons souvent des problèmes nécessitant la mise en cache des données. Cet article présentera la méthode de mise en cache des données dans Vue.

1. propriété calculée

computed est une propriété calculée de Vue.js. Elle sera automatiquement mise à jour lorsque les données changent et ne sera calculée qu'en cas de besoin. Par conséquent, l’attribut calculé convient à la gestion d’une logique de données complexe et à la mise en cache des données.

Par exemple, nous avons un exemple de calcul de prix :

<template>
  <div>
    <p>原价：{{ price }}</p>
    <p>折扣：{{ discount }}</p>
    <p>实际价格：{{ actualPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 100,
      discount: 0.8
    };
  },
  computed: {
    actualPrice() {
      return this.price * this.discount;
    }
  }
};
</script>

Dans le code ci-dessus, nous définissons un attribut calculé actualPrice, qui calculera le prix réel en fonction du prix et de la remise. Lorsque le prix ou la remise change, le prix réel est automatiquement mis à jour. Par conséquent, nous n’avons pas besoin de mettre à jour manuellement le prix réel, réalisant ainsi la mise en cache des données.

2. attribut watch

watch est un attribut d'observation de Vue.js. Il peut observer les changements dans les données et exécuter des fonctions de rappel lorsque les données changent. Grâce à l'attribut watch, nous pouvons gérer la logique de mise en cache lorsque les données changent.

Par exemple, nous avons une fonction de recherche. Nous espérons que l'utilisateur n'effectuera pas l'opération de recherche immédiatement après avoir saisi le contenu dans la zone de saisie, mais effectuera l'opération de recherche après qu'il aura arrêté de taper pendant un certain temps.

<template>
  <div>
    <input v-model="keyword" />
    <ul>
      <li v-for="item in searchResult" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      searchResult: []
    };
  },
  watch: {
    keyword(newVal) {
      this.debouncedQuery(newVal);
    }
  },
  created() {
    this.debouncedQuery = _.debounce(this.query, 500);
  },
  methods: {
    query(keyword) {
      // 执行搜索操作
      // ...
    }
  }
};
</script>

Dans le code ci-dessus, nous définissons un mot-clé d'attribut watch, qui écoutera les changements de mot-clé et effectuera une opération de recherche 500 millisecondes après que l'utilisateur arrête de taper via la fonction anti-rebond de lodash. Cela implémente la mise en cache des données.

3. localStorage et sessionStorage

En plus des attributs calculés et de surveillance, nous pouvons également utiliser localStorage et sessionStorage pour implémenter la mise en cache des données. localStorage et sessionStorage sont deux API fournies par HTML5 pour stocker des données sur le client. Elles peuvent toutes deux enregistrer des données après la fermeture du navigateur, mais les données de localStorage n'expireront pas, tandis que les données de sessionStorage seront automatiquement effacées après la fermeture du navigateur.

Nous pouvons utiliser localStorage ou sessionStorage pour enregistrer des données et obtenir les données enregistrées lorsque la page est rechargée, réalisant ainsi la mise en cache des données.

Par exemple, nous avons une liste de données, et nous espérons que les utilisateurs pourront se souvenir de son statut lorsqu'ils cliquent sur une donnée, et les détails de ces données pourront être automatiquement développés au prochain chargement de la page.

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        <h3 @click="toggleInfo(item.id)">
          {{ item.title }}
        </h3>
        <div v-show="isOpen(item.id)">详细信息</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [{ id: 1, title: '数据1' }, { id: 2, title: '数据2' }, { id: 3, title: '数据3' }],
      status: {}
    };
  },
  created() {
    const status = JSON.parse(sessionStorage.getItem('status'));
    if (status) {
      this.status = status;
    }
  },
  methods: {
    toggleInfo(id) {
      this.$set(this.status, id, !this.status[id]);
      sessionStorage.setItem('status', JSON.stringify(this.status));
    },
    isOpen(id) {
      return this.status[id];
    }
  }
};
</script>

Dans le code ci-dessus, nous utilisons sessionStorage pour enregistrer l'état de chaque donnée dans la liste de données et utilisons la méthode isOpen pour déterminer si les détails des données doivent être développés et enregistrés dans l'objet d'état.

Résumé

Les trois méthodes de traitement de mise en cache des données ont chacune leurs propres avantages et inconvénients. Nous pouvons choisir la méthode appropriée en fonction de la situation spécifique. L'attribut calculé convient à une logique de calcul simple et à une réponse en temps réel aux données, l'attribut watch convient à une logique de traitement de données complexe, et localStorage et sessionStorage conviennent aux scénarios dans lesquels les données doivent être partagées entre différentes pages. Dans le développement du projet, la mise en cache des données est un problème inévitable. Une utilisation raisonnable de la mise en cache des données peut améliorer l'efficacité du développement et l'expérience utilisateur du projet.

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!