So definieren Sie Datenbeispiele in Vue

Vorwort

Im Entwicklungsprozess ist das Definieren von Variablen eine sehr häufige und grundlegende Aufgabe. Wie man Variablen entsprechend den Verwendungsszenarien und dem Umfang der Variablen sinnvoll definiert, ist eine sehr kleine Sache, bei der man leicht Fehler macht.

Vue2 ist seit vielen Jahren beliebt. Die meisten Entwickler definieren während des Entwicklungsprozesses gerne viele Variablen in der Datenoption. Dies wirkt sich sehr nachteilig auf die Lesbarkeit, Wartbarkeit und Leistung des Codes aus. Wenn Sie Variablen gut nutzen möchten, müssen Sie die Eigenschaften von Vue und JS kombinieren.

In Vue können Variablen in zwei Typen unterteilt werden, je nachdem, ob eine bidirektionale Datenbindung erforderlich ist:

Eine Möglichkeit besteht darin, die Daten von Vue zu kapern und in Echtzeit auf Datenänderungen in der Ansicht zu reagieren.

Solange die Daten nur die Nachricht ändern können, reagiert die in der Vorlage gebundene Nachricht in Echtzeit

<Vorlage>
  <div>{{msg}}</div>
</Vorlage>

<Skript>
Standard exportieren {
  Daten() {
    Nachricht: "" 
  }
};
</Skript>

Es gibt eine andere Methode, die nicht von Vue-Daten gekapert werden muss:

Funktioniert nur in Skripten, wird nicht in Vorlagen verwendet, kein Datendiebstahl erforderlich

Name ist nur in der Funktion concatName gültig, definieren Sie ihn also einfach als lokale Variable

age wird sowohl in der getAge- als auch in der concatName-Funktion benötigt. Es ist nicht angemessen, es als lokale Variable zu verwenden. Dann kann sein Umfang vergrößert werden, um seine Verwendung an mehreren Stellen zu erleichtern.

<Skript>
const Alter = "Balken"
Standard exportieren {
  Methoden: {
    getAge() {
      Rückkehralter
    },
    concatName() {
      lass name = "nordon"
      gibt `Name: ${Name}, Alter: ${Alter}` zurück
    }
  },
};
</Skript>

Es wird nur als Rendering-Daten in der Vorlage verwendet. Nach der Anpassung wird es in nachfolgenden Vorgängen nicht mehr geändert. Wenn Vue verwendet wird, um diese Daten zu kapern, geht etwas Leistung verloren.

<Vorlage>
  <div v-for="Artikel in arr">{{Artikel.name}}</div>
</Vorlage>

<Skript>
const arr = Objekt.freeze([{
  Name: 'Nordon',
  Alter: 18
}])
Standard exportieren {
  Daten() {
    zurückkehren {
      arr
    }
  }
};
</Skript>

Verwenden Sie Object.freeze, um die Daten einzufrieren, die nicht entführt werden müssen. Wenn die Daten in Vue rekursiv durchsucht werden, um Daten zu entführen, werden die Daten nicht entführt. Insbesondere bei einer großen Anzahl tabellenartiger Daten ist die Leistungsverbesserung erheblich.

Sie können dem Vue-Quellcode entnehmen, warum nach der Verwendung von Object.freeze zur Verarbeitung der Daten kein Datendiebstahl stattfindet.

Funktion defineReactive (Objekt, Schlüssel) {
  // Irrelevanten Code löschen und nur die Beurteilungsbedingung behalten const property = Object.getOwnPropertyDescriptor(obj, key)
  if (Eigenschaft && Eigenschaft.konfigurierbar === false) {
    zurückkehren
  }
}

Zusammenfassen

Dies ist das Ende dieses Artikels zum Definieren von Daten in Vue. Weitere relevante Inhalte zu Vue-Definitionsdaten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!