Vue3 data() Funktion

Vue3 选项式 APIVue3 Options API

In Vue3,data()Die Funktion ist eine der Kernfunktionen, mit denen der interne Zustand (Daten) einer Komponente definiert wird.

data()Die Funktion gibt ein Objekt zurück, und die Eigenschaften in diesem Objekt sind die internen Daten der Komponente, auf die über Templates oder andere Logik zugegriffen und die manipuliert werden können.

data()Die Funktion ist ein wichtiger Bestandteil jeder Vue-Komponente, durch die der Datenzustand der Komponente initialisiert werden kann.

Grundlegende Verwendung der data()-Funktion

In Vue3,data()Die Funktion wird normalerweise als Funktion definiert und gibt ein Objekt zurück. Dieses Objekt enthält die von der Komponente benötigten Dateneigenschaften.

Beispielcode

Beispiel

export default {
  data() {
    return {
      message: 'Hello, Vue3!',
      count: 0
    };
  }
};

Erklärung

  • data()Die Funktion gibt ein Objekt zurück, das zwei Eigenschaften enthält:
    • message: einen Datenwert vom Typ String mit einem Anfangswert von'Hello, Vue3!'。
    • count: einen numerischen Datenwert mit einem Anfangswert von0。
  • Diese Daten können direkt im Template oder in den Methoden der Komponente verwendet werden.

Warum ist data() eine Funktion?

In Vue3,data()muss eine Funktion sein, anstatt direkt ein Objekt zurückzugeben. Das liegt daran, dass Vue-Komponenten mehrmals wiederverwendet werden können. Wenndata()ein Objekt ist, dann teilen alle Instanzen dasselbe Datenobjekt, was zu Datenkonflikten führt.

Durchdata()Indem man es als Funktion definiert, ruft Vue bei jeder Erstellung einer Komponenteninstanz diese Funktion auf und gibt ein neues Datenobjekt zurück, wodurch die Daten jeder Instanz unabhängig bleiben.

Beispiel

Beispiel

export default {
  data() {
    return {
      message: 'Hello, Vue3!'
    };
  }
};
  • Jedes Mal, wenn eine Komponenteninstanz erstellt wird,data()wird die Funktion aufgerufen und gibt brandneuemessageDaten zurück.

Merkmale der data()-Funktion

1. Reaktive Daten

data()Die Eigenschaften im zurückgegebenen Objekt werden von Vue in reaktive Daten umgewandelt. Wenn sich diese Daten ändern, aktualisiert Vue automatisch die Ansichten, die von ihnen abhängen.

2. Dateninitialisierung

data()Die Funktion wird aufgerufen, wenn die Komponente instanziiert wird, um den Datenzustand der Komponente zu initialisieren.

3. Datenisolierung

Dadata()Sie ist eine Funktion, jede Komponenteninstanz hat ein unabhängiges Datenobjekt, wodurch Datenfreigabe und Konflikte vermieden werden.

Hinweise zur data()-Funktion

1. Keine Arrow-Funktionen verwenden

data()Die Funktion darf keine Arrow-Funktion sein, da Arrow-Funktionen keinen eigenenthisKontext haben, was dazu führt, dass auf die Komponenteninstanz falsch zugegriffen wird.

Falsches Beispiel：

Beispiel

export default {
  data: () => ({
    message: 'Hello, Vue3!'
  })
};

Korrektes Beispiel：

Beispiel

export default {
  data() {
    return {
      message: 'Hello, Vue3!'
    };
  }
};

2. Vermeiden Sie es, Eigenschaften der Vue-Instanz direkt zu ändern

Indata()In der Funktion dürfen Sie nicht direkt Eigenschaften der Vue-Instanz ändern (wie z. B.this.$data), sondern definieren Sie Daten, indem Sie ein Objekt zurückgeben.

Praktische Übung

Versuchen Sie, eine Vue-Komponente zu erstellen, und definieren Sie indata()der Funktion die folgenden Daten:

  • username: Initialwert ist ein leerer String''。
  • age: Initialwert ist0。
  • isStudent: Initialwert istfalse。

Beispiel

<template>
  <div>
    <h1>Benutzerinformationen</h1>
    <p>Benutzername: {{ username }}</p>
    <p>Alter: {{ age }}</p>
    <p>Ist Student: {{ isStudent ? 'Yes' : 'No' }}</p>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
name: 'UserInfo', // Komponentenname
  data() {
    return {
username: '', // Anfangswert ist eine leere Zeichenkette
age: 0, // Anfangswert ist 0
isStudent: false // Anfangswert ist false
    };
  }
});
</script>

<style scoped>
/* Optionale Stile */
h1 {
  color: #2c3e50;
}
p {
  font-size: 16px;
}
</style>

Vue3 选项式 APIVue3 Options API

Weitere Erweiterungen