Wie speichert man Daten in Vue zwischen?

Vue.js ist ein beliebtes Front-End-Framework. Es übernimmt die MVVM-Architektur (Model-View-ViewModel) und macht die Front-End-Entwicklung durch die Ideen des deklarativen Renderings und der Komponentisierung komfortabler und effizienter. Während des Entwicklungsprozesses treten häufig Probleme auf, die das Zwischenspeichern von Daten erfordern. In diesem Artikel wird die Methode zum Zwischenspeichern von Daten in Vue vorgestellt.

1. Die berechnete Eigenschaft

computed ist eine berechnete Eigenschaft von Vue.js. Sie wird automatisch aktualisiert, wenn sich die Daten ändern, und wird nur bei Bedarf berechnet. Daher eignet sich das berechnete Attribut für die Handhabung komplexer Datenlogik und Daten-Caching.

Zum Beispiel haben wir ein Beispiel für die Preisberechnung:

<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>

Im obigen Code definieren wir ein berechnetes Attribut „actualPrice“, das den tatsächlichen Preis basierend auf Preis und Rabatt berechnet. Wenn sich Preis oder Rabatt ändern, wird der tatsächliche Preis automatisch aktualisiert. Daher müssen wir den tatsächlichen Preis nicht manuell aktualisieren und so eine Datenzwischenspeicherung erreichen.

2. watch-Attribut

watch ist ein Beobachtungsattribut von Vue.js. Es kann Änderungen in Daten beobachten und Rückruffunktionen ausführen, wenn sich die Daten ändern. Über das Watch-Attribut können wir die Caching-Logik verwalten, wenn sich die Daten ändern.

Zum Beispiel haben wir eine Suchfunktion. Wir hoffen, dass der Benutzer den Suchvorgang nicht sofort nach der Eingabe von Inhalten in das Eingabefeld ausführt, sondern den Suchvorgang ausführt, nachdem der Benutzer eine Zeit lang mit der Eingabe aufgehört hat.

<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>

Im obigen Code definieren wir ein Watch-Attribut-Schlüsselwort, das auf Änderungen im Schlüsselwort wartet und 500 Millisekunden, nachdem der Benutzer mit der Eingabe aufgehört hat, über die Debounce-Funktion von lodash einen Suchvorgang ausführt. Dadurch wird das Daten-Caching implementiert.

3. localStorage und sessionStorage

Zusätzlich zu berechneten und überwachten Attributen können wir auch localStorage und sessionStorage verwenden, um Daten-Caching zu implementieren. localStorage und sessionStorage sind zwei von HTML5 bereitgestellte APIs zum Speichern von Daten auf dem Client. Sie können beide Daten speichern, nachdem der Browser geschlossen wurde. LocalStorage-Daten laufen jedoch nicht ab, während SessionStorage-Daten nach dem Schließen des Browsers automatisch gelöscht werden.

Wir können localStorage oder sessionStorage verwenden, um Daten zu speichern und die gespeicherten Daten beim erneuten Laden der Seite abzurufen, wodurch eine Datenzwischenspeicherung erreicht wird.

Zum Beispiel haben wir eine Datenliste und hoffen, dass Benutzer sich an deren Status erinnern können, wenn sie auf ein Datenelement klicken, und dass die Details dieser Daten beim nächsten Laden der Seite automatisch erweitert werden können.

<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>

Im obigen Code verwenden wir sessionStorage, um den Status aller Daten in der Datenliste zu speichern, und verwenden die isOpen-Methode, um zu bestimmen, ob die Datendetails erweitert und im Statusobjekt gespeichert werden müssen.

Zusammenfassung

Die drei Daten-Caching-Verarbeitungsmethoden haben jeweils ihre eigenen Vor- und Nachteile. Wir können je nach Situation die geeignete Methode auswählen. Das berechnete Attribut eignet sich für einfache Berechnungslogik und Echtzeitreaktionen auf Daten, das watch-Attribut eignet sich für komplexe Datenverarbeitungslogik und localStorage und sessionStorage eignen sich für Szenarien, in denen Daten zwischen verschiedenen Seiten gemeinsam genutzt werden müssen. Bei der Entwicklung des Projekts ist das Daten-Caching ein unvermeidliches Problem. Durch den sinnvollen Einsatz des Daten-Caching können die Entwicklungseffizienz und die Benutzererfahrung des Projekts verbessert werden.

Das obige ist der detaillierte Inhalt vonWie speichert man Daten in Vue zwischen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!