Detaillierte Erläuterung des Datenreaktionsprinzips von Vue

Dieser Artikel richtet sich hauptsächlich an diejenigen, die den responsiven Quellcode von Vue nicht verstehen oder noch nicht damit in Berührung gekommen sind. Sein Hauptzweck besteht darin, ein grundlegendes Verständnis des responsiven Prinzips von Vue zu vermitteln. Wenn Ihnen in einem Vorstellungsgespräch solche Fragen gestellt werden, wissen Sie, was der Interviewer von Ihnen als Antwort erwartet? PS: Sollte der Artikel Fehler enthalten, können Sie diese gern korrigieren.

Reaktionsschnelles Verständnis

Reaktionsfähigkeit bedeutet, wie der Name schon sagt, dass Datenänderungen eine Aktualisierung der Ansicht bewirken. In diesem Artikel wird hauptsächlich die Implementierung der Objekt- und Array-Reaktionsfähigkeit in Vue2.0 analysiert. Die Sammlung von Abhängigkeiten und die Anzeige von Aktualisierungen verschieben wir auf den nächsten Artikel.

In Vue beziehen sich die von uns erwähnten responsiven Daten im Allgemeinen auf Daten vom Typ Array und Objekttyp. Vue entführt die Eigenschaften eines Objekts intern über die Methode Object.defineProperty und das Array wird durch Überschreiben der Array-Methode implementiert. Lassen Sie es uns unten einfach implementieren.

Zuerst definieren wir die Daten, die abgefangen werden müssen.

const vm = neuer Vue({
 Daten () {
  zurückkehren {
   Anzahl: 0,
   Person: {Name: 'xxx'},
   arr: [1, 2, 3]
  }
 }
})
let arrayMethods
function Vue (options) { // Betrachte hier nur die Datenoperation let data = options.data
 wenn (Daten) {
  Daten = dies._Daten = Datentyp === 'Funktion' ? Datenaufruf(dies) : Daten
 }
 Beobachter (Daten)
}
Funktion Beobachter(Daten) { 
 wenn (Datentyp !== 'Objekt' || Daten === null) {
  Rückgabedaten
 }
 if (data.__ob__) { // Die Existenz des Attributs __ob__ zeigt an, dass es abgefangen wurde. Daten zurückgeben
 }
 neuer Beobachter (Daten)
}

Bitte lesen Sie weiter unten für die Implementierung und Funktion von arrayMethods, Observer und __ob__

Implementieren der Observer-Klasse

Klasse Beobachter {
 Konstruktor (Daten) {
  Object.defineProperty(data, '__ob__', { // Definiere die __ob__-Eigenschaft für data, die bei Array-Hijacking benötigt wird enumerable: false, // Nicht aufzählbar configurable: false, // Nicht konfigurierbar value: this // Der Wert ist die Observer-Instanz })
  if (Array.isArray(data)) { //Array abfangen data.__proto__ = arrayMethods //Prototyp-Vererbung this.observerArray(data)
  } sonst { // Objektabfangen this.walk(data)
  }
 }
 Spaziergang (Daten) {
  const keys = Objekt.keys(Daten)
  für(lass i = 0; i < Schlüssel.Länge; i++) {
   const Schlüssel = Schlüssel[i]
   defineReactive(Daten, Schlüssel, Daten[Schlüssel])
  }
 }
 observerArray (data) { // jedes Element im Array abfangen data.forEach(value => observer(value))
 }
}

Objektabfangen

Einige wichtige Hinweise zum Objekt-Hijacking:

• Durchlaufen Sie das Objekt. Wenn der Wert immer noch ein Objekttyp ist, müssen Sie die Beobachtermethode erneut aufrufen.
• Wenn der neue Wertesatz ein Objekttyp ist, muss er ebenfalls abgefangen werden

//Intercept-Funktion des Verarbeitungsobjekts defineReactive(data, key, value) {
 observer(value) // Wenn value immer noch ein Objekttyp ist, müssen Sie Object.defineProperty(data, key, { rekursiv kapern.
  erhalten() {
   Rückgabewert
  },
  setze(neuerWert){
   wenn (neuerWert === Wert) return
   Wert = neuerWert
   observer(newValue) // Wenn der newValue-Wert auch ein Objekttyp ist, muss er gekapert werden}
 })
}

Array-Hijacking

Einige wichtige Hinweise zum Array-Hijacking:

• Arrays verwenden die Idee der Funktionsentführung (Slice-Programmierung), um Daten abzufangen
• Neu hinzugefügte Werte im Array müssen, wenn es sich um Objekttypen handelt, ebenfalls erneut abgefangen werden

const oldArrayPrototype = Array.prototype
arrayMethods = Objekt.create(alterArrayPrototyp)
const methods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'] // Methoden, die das ursprüngliche Array ändern können methods.forEach(method => {
 arrayMethods[Methoden] = Funktion (...Argumente) {
  const Ergebnis = alterArrayPrototyp[Methoden].call(diese, ...Argumente)
  const ob = this.__ob__ // dies ist das Array, das die Methode let inserted aufruft; // Die Sammlung der neu hinzugefügten Elemente im Array muss abgefangen werden switch(methods) {
   Fall 'push': 
   Fall 'Unshift':
    eingefügt = Argumente
   Fall 'Spleißen':
    inserted = args.slice(2) // Weil der zweite Parameter von splice derjenige ist, der hinzugefügt wird}
  wenn (eingefügt) {
   ob.observerArray(eingefügt)
  }
  Ergebnis zurückgeben
 }
})

Zusammenfassung der Prinzipien

Wenn wir im Interview das Reaktionsfähigkeitsprinzip von Vue handschriftlich schreiben müssen, reicht der obige Code aus. Wenn wir jedoch den Quellcode von Vue kennen und im Vorstellungsgespräch die folgenden zusammenfassenden Antworten geben können, wird uns der Interviewer den Vorzug geben.

Das responsive Prinzip des Vue 2.0-Quellcodes:

• Da Objekte rekursiv abgefangen werden, verschlechtert sich die Leistung umso mehr, je tiefer die Datenebene liegt.
• Arrays werden nicht mit Object.defineProperty abgefangen, da bei zu vielen Array-Elementen die Leistung beeinträchtigt wird.
• Es werden nur die in data definierten Daten abgefangen. Die Attribute, die wir später der Instanz über vm.newObj = 'xxx' hinzufügen, werden nicht abgefangen.
• Änderungen des Index und der Länge des Arrays werden nicht abgefangen und führen daher nicht zu einer Aktualisierung der Ansicht.
• Wenn Sie das Hinzufügen neuer Attribute zu Daten und die Änderung des Array-Index und der Array-Länge abfangen müssen, können Sie die Methode $set verwenden
• Mit der Methode Object.freeze können Sie Daten optimieren und die Leistung verbessern. Die Daten, die diese Methode verwendet, werden von den Methoden set und get nicht neu geschrieben.

Reaktionsprinzip des Vue 3.0-Quellcodes:

• In Version 3.0 wird Proxy anstelle von Object.defineProperty verwendet. Es verfügt über 13 Abfangmethoden. Es muss weder Objekte und Arrays separat verarbeiten, noch muss es rekursiv abfangen. Dies ist auch die größte Leistungsverbesserung.
• Einfache Umsetzung des Responsive-Prinzips der Vue 3.0-Version

const handler = {
 get (Ziel, Schlüssel) {
  wenn (Typ von Ziel[Schlüssel] === 'Objekt' und Ziel[Schlüssel] !== null) {
   gib neuen Proxy zurück (Ziel[Schlüssel], Handler)
  }
  returniere Reflect.get(Ziel, Schlüssel)
 },
 set (Ziel, Schlüssel, Wert) {
  if(Schlüssel === 'Länge') returniere true
  console.log('aktualisieren')
  returniere Reflect.set(Ziel, Schlüssel, Wert)
 }
}
const obj = {
 arr: [1, 2, 3],
 Anzahl: { Num: 1 }
}
// obj ist das Zielobjekt des Proxys, handler ist das Konfigurationsobjekt const proxy = new Proxy(obj, handler)

Dies ist das Ende dieses Artikels mit der detaillierten Erläuterung des Datenreaktionsprinzips von Vue. Weitere relevante Inhalte zur Datenreaktion von Vue 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!