Ein Leitfaden für Einsteiger zu VUE3: Responsive Daten und berechnete Eigenschaften

In modernen Front-End-Frameworks sind reaktive Daten und berechnete Eigenschaften sehr wichtige Konzepte. Als Vue3-Anfänger können Sie nach dem Erlernen dieser beiden Konzepte die Funktionen und die Verwendung des Vue-Frameworks besser verstehen.

Dieser Artikel konzentriert sich auf die Erläuterung der reaktionsfähigen Daten und Recheneigenschaften von Vue3, einschließlich ihrer grundlegenden Konzepte, Verwendung und Beispiele. Wenn Sie mit Vue3 noch nicht vertraut sind, lernen Sie bitte zunächst die Grundlagen von Vue3.

1. Was sind responsive Daten?

In Vue3 sind responsive Daten Daten, die Änderungen automatisch verfolgen und die Seite sofort aktualisieren können. In Vue3 können reaktionsfähige Daten gewöhnliche JavaScript-Objekte, primitive Datentypen, Arrays usw. sein.

Die Verwendung responsiver Daten in Vue3 ist sehr einfach, Sie müssen lediglich die entsprechenden Attribute im Datenobjekt definieren. Das Vue-Framework führt die Datenbindung basierend auf diesen Eigenschaften durch, um reaktionsfähige Funktionen zu erreichen.

Zum Beispiel:

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue3!"
    };
  }
};
</script>

Im obigen Code definieren wir ein Datenobjekt und definieren darin eine Attributnachricht. In der Vorlage verwenden wir den Differenzausdruck {{ message }}, um dieses Attribut anzuzeigen. Wenn wir den Wert der Nachricht ändern, wird der Inhalt der Seite automatisch aktualisiert.

2. Was ist eine berechnete Eigenschaft?

In Vue3 ist eine berechnete Eigenschaft eine in Vorlagen verwendete Eigenschaft, die auf der Grundlage anderer Eigenschaftswerte berechnet wird. Der Wert einer berechneten Eigenschaft wird zwischengespeichert und nur dann neu berechnet, wenn sich die Eigenschaft, von der sie abhängt, ändert.

Die Verwendung berechneter Eigenschaften in Vue3 ist ebenfalls sehr einfach. Sie müssen lediglich die entsprechenden Eigenschaften im berechneten Objekt definieren. Jede Eigenschaft in einem berechneten Objekt muss eine Funktion sein und einen berechneten Wert zurückgeben.

Zum Beispiel:

<template>
  <div>{{ fullName }}</div>
</template>

<script>
export default {
  data() {
    return {
      firstName: "John",
      lastName: "Doe"
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};
</script>

Im obigen Code definieren wir zwei Datenattribute: Vorname und Nachname. Wir definieren außerdem ein berechnetes Attribut fullName, das einen neuen Wert, den vollständigen Namen, basierend auf den Werten von firstName und lastName berechnet. Zu diesem Zeitpunkt wird der Wert von fullName zwischengespeichert und erst dann neu berechnet, wenn sich firstName oder lastName ändert.

3. Beispiele für reaktionsfähige Daten und berechnete Eigenschaften

Das Folgende ist ein einfaches Beispiel, das zeigt, wie reaktionsfähige Daten und berechnete Eigenschaften verwendet werden, um eine einfache Warenkorbfunktion zu implementieren.

<template>
  <div>
    <div>商品列表：</div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }} - {{ item.price }}元
        <button @click="addToCart(item)">加入购物车</button>
      </li>
    </ul>
    <div>购物车：</div>
    <ul>
      <li v-for="item in cart" :key="item.id">
        {{ item.name }} - {{ item.price }}元 - 数量: {{ item.quantity }}
        <button @click="removeFromCart(item)">x</button>
      </li>
    </ul>
    <div>总价: {{ totalPrice }}元</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: "苹果", price: 8 },
        { id: 2, name: "香蕉", price: 3 },
        { id: 3, name: "橙子", price: 5 }
      ],
      cart: []
    };
  },
  computed: {
    totalPrice() {
      return this.cart.reduce((total, item) => total + item.price * item.quantity, 0);
    }
  },
  methods: {
    addToCart(item) {
      const idx = this.cart.findIndex(e => e.id === item.id);
      if (idx === -1) {
        this.cart.push({ ...item, quantity: 1 });
      } else {
        this.cart[idx].quantity += 1;
      }
    },
    removeFromCart(item) {
      const idx = this.cart.findIndex(e => e.id === item.id);
      if (idx !== -1) {
        this.cart.splice(idx, 1);
      }
    }
  }
};
</script>

Im obigen Code definieren wir ein Datenobjekt, das zwei Attribute enthält: Artikel und Warenkorb. „items“ stellt die Produktliste dar und „cart“ stellt den Warenkorb dar.

Wir definieren außerdem ein berechnetes Attribut „totalPrice“, um den Gesamtpreis des Warenkorbs basierend auf dem Preis und der Menge jedes Artikels im Warenkorb zu berechnen.

Schließlich haben wir auch zwei Methoden definiert: addToCart und removeFromCart. addToCart wird verwendet, um das angegebene Produkt zum Warenkorb hinzuzufügen, und removeFromCart wird verwendet, um das angegebene Produkt aus dem Warenkorb zu entfernen.

Bei Verwendung dieser Komponente müssen wir nur Requisiten in der übergeordneten Komponente einführen und übergeben, und Vue3 führt automatisch die Datenbindung und das Rendern der Komponente durch.

Zusammenfassung

Die reaktionsfähigen Daten und berechneten Eigenschaften von Vue3 sind eine der Kernfunktionen des Vue3-Frameworks, und ihre Beherrschung ist für Vue3-Entwickler von entscheidender Bedeutung.

In Vue3 können reaktionsfähige Daten Änderungen automatisch verfolgen und die Seite sofort aktualisieren. Berechnete Attribute können neue Attributwerte basierend auf anderen Attributwerten berechnen und die Berechnungsergebnisse zwischenspeichern.

Anhand eines einfachen Warenkorbbeispiels demonstrieren wir, wie man die responsiven Daten und berechneten Eigenschaften von Vue3 nutzt, um eine hochdynamische Schnittstelle zu implementieren. Wenn Sie Vue3 besser lernen möchten, lesen Sie es bitte in Kombination mit der offiziellen Vue3-Dokumentation und anderen verwandten Artikeln.

Das obige ist der detaillierte Inhalt vonEin Leitfaden für Einsteiger zu VUE3: Responsive Daten und berechnete Eigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!