Wissen Sie, warum Vue-Daten eine Funktion sind?

Erklärung auf der offiziellen Website: Wenn eine Komponente definiert wird, müssen Daten als Funktion deklariert werden, die ein anfängliches Datenobjekt zurückgibt, da die Komponente zum Erstellen mehrerer Instanzen verwendet werden kann. Wenn Daten reine Objekte blieben, würden alle Instanzen einen Verweis auf dasselbe Datenobjekt gemeinsam nutzen! Indem wir eine Datenfunktion bereitstellen, können wir jedes Mal, wenn eine neue Instanz erstellt wird, die Datenfunktion aufrufen, um eine neue Kopie des ursprünglichen Datenobjekts zurückzugeben. Als ich diese Frage sah, stellte sie mir ein Interviewer während eines Vorstellungsgesprächs. Ich war damals verwirrt und habe nie darüber nachgedacht, warum. Ich wusste nur, dass der Code so geschrieben werden musste. Ich werde darauf zurückkommen, um mehr über die Grundsätze dieses Teils zu erfahren, wenn ich in letzter Zeit Zeit habe. Auf zwei davon möchte ich lieber antworten.

1. Es soll eine Datenverschmutzung vermeiden, die durch die gemeinsame Nutzung derselben Daten beim wiederholten Erstellen von Instanzen entsteht

2. Der Grund für das Schreiben einer Funktion besteht darin, sicherzustellen, dass das Objekt unabhängig ist. Wenn Sie sicherstellen können, dass das Objekt eindeutig ist, können Sie das Objekt direkt schreiben, ohne eine Funktion zu schreiben.

Im Endeffekt geht es vor allem darum, Datenverschmutzung zu vermeiden.

Wenn wir dieses Problem lösen wollen, müssen wir über die Prototypenkette und dies sprechen.

Die entsprechenden Kenntnisse können Sie sich selbst aneignen. Objekte teilen in der Prototypenkette gemeinsame Eigenschaften und Methoden.

Person1 und Person2 sind Verweise auf Person. Wenn also Person2 seine Daten ändert, werden tatsächlich die Daten von Person geändert. Da sich die Daten der Person geändert haben, wird auch die Referenz von Person1 geändert.

Funktion Person(){
 }
 Person.prototype.datas={
   a:"c",
   f:'h'
 }
 var person1 = neue Person()
 var person2 = neue Person()
 person2.datas.a="Wow"
 console.log(person2)
 console.log(person1) 

Ich habe mir schon immer folgende Frage gestellt: Da sowohl person1 als auch person2 Verweise auf Person sind, warum führt das Einfügen in ein Objekt zu Datenverschmutzung, das Einfügen in eine Methode jedoch nicht? Zunächst einmal müssen Sie eines wissen: Die Richtung von this kann nicht bestimmt werden, wenn die Funktion definiert wird. Erst wenn die Funktion ausgeführt wird, können wir feststellen, auf wen this tatsächlich zeigt. Tatsächlich zeigt this auf das Objekt, das es aufruft. Ich habe noch eine Frage. Warum gibt es unterschiedliche Ergebnisse, wenn sie auf die gleiche Methode verweisen? Hat er einen geklont? Antwort: Eine Methode, die innerhalb eines Konstruktors definiert ist, wird auf jeder seiner Instanzen geklont; eine Methode, die auf prototype eines Konstruktors definiert ist, sorgt dafür, dass alle seine Instanzen diese Methode gemeinsam nutzen, definiert aber die Methodenreferenz innerhalb jeder Instanz nicht neu: https://www.jb51.net/article/199830.htm

Funktion Person(){
    this.datas = this.sayHello() //dies bezieht sich auf das Objekt, das es aufruft}
  Person.prototype.sayHello = Funktion () {
      zurückkehren {
        d:1,
        b:2
      }
    };
  var person1 = neue Person()
  var person2 = neue Person()
  person2.datas.d="wewew"
  console.log(person1)
  console.log(person2) 

Die spezifischen Beispiele sind wie folgt

1. Im Normalzustand entsteht bei Verwendung der Datenfunktion keine Datenverschmutzung

<em id="__mceDel">ButtonTest.vue<br><Vorlage>
  <div>
    <div>{{ Anzahl }}</div>
    <button @click="onAdd">Hinzufügen</button>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      Anzahl: 0,
    };
  },
  Methoden: {
    beimHinzufügen() {
      dies.zählen++;
    },
  },
};
</script><br></em>

Startseite.vue
<Vorlage>
  <div Klasse="Startseite">
    <Schaltflächentest></Schaltflächentest>
    <Schaltflächentest></Schaltflächentest>
  </div>
</Vorlage>
 
<Skript>
importiere ButtonTest aus "@/components/ButtonTest.vue";
Standard exportieren {
  Name: "Home",
  Komponenten:
    KnopfTest,
  },
};
</Skript> 

2. Wenn Daten direkt als Objekt definiert werden, wird ein Fehler gemeldet

3. Definieren Sie die Form eines externen Objekts und klicken Sie dann auf eine Schaltfläche. Zwei Daten werden gleichzeitig hinzugefügt, was zu Datenverschmutzung führt

Bisher geht es in diesem Artikel darum, warum Vue-Daten eine Funktion sind. Dies ist das Ende des Artikels. Weitere relevante Inhalte zu Vue-Datenfunktionen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!