Vue implementiert bidirektionale Datenbindung

In diesem Artikelbeispiel wird der spezifische Code von Vue zur Implementierung der bidirektionalen Datenbindung zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Arrays und Objekte in Vue verwenden unterschiedliche Bindungsmethoden

1. Vue-Objektdatenbindung

(1) Datenerfassung

In js verwenden wir Object.defineProperty() und ES6-Proxy, um Objekte zu erkennen

In vue2.x wird Object.defineProperty() verwendet, um Daten auf Objekten zu erkennen. Wir kapseln Object.defineProperty zunächst mit dem folgenden Code ein:

Funktion defineReactive(Daten, Schlüssel, Wert){
    wenn(Typ von Wert === 'Objekt') neuer Beobachter(Wert)
    lass dep = neues Dep();
    Object.defineProperty(Daten, Schlüssel, Wert) {
    aufzählbar: wahr,
    konfigurierbar: true,
    erhalten: Funktion () {
        dep.abhängig();
        Rückgabewert;
    },
    setze: Funktion() {
        wenn(Wert === neuerWert) {
            zurückkehren ;
        }
        val = neuerWert;
        dep.benachrichtigen()
    }
}
}

Die einzigen Parameter, die übergeben werden müssen, sind data, key und val. Get wird immer dann ausgelöst, wenn Daten aus dem Schlüssel in data gelesen werden, und set wird immer dann ausgelöst, wenn data geändert werden.

(2) Sammlung von Abhängigkeiten

Sammeln Sie zuerst Abhängigkeiten und lösen Sie die gesammelten Abhängigkeiten in einer Schleife erneut aus, wenn sich die Eigenschaften ändern. Sammeln Sie Abhängigkeiten in Gettern und lösen Sie Abhängigkeiten in Settern aus.

Abhängigkeitsklasse Dep

exportiere Standardklasse Dep {
    Konstruktor() {
        dies.subs = []
    }
    
    Subsub hinzufügen () {
        dies.subs.push(sub)
    }
    
    entferneSub(sub) {
        entfernen(diese.subs, sub)
    }
    
    abhängen() {
        wenn(Fenster.Ziel) {
            dies.addSub(Fenster.Ziel)
        }
    }
    
    benachrichtigen() {
        const subs = this.subs.slice()
        für(lass i = 0, l = Teillänge; i < l; i++) {
            subs[i].update()
        }
    }
}
 
Funktion entfernen(arr, Element) {
    wenn (arr.Länge) {
        const index = arr.indexOf(Element)
        wenn(index > -1) {
            gibt arr.splice(index, 1) zurück
        }
}
}

Die Watcher-Klasse ist die Abhängigkeit, die wir gesammelt haben

exportiere Standardklasse Watcher {
    Konstruktor(vm, expOrFn, cb) {
        dies.vm = vm
        this.getter = parsePath(expOrFn)
        dies.cb = cb
        dieser.Wert = dies.get()
    }
    
    erhalten() {
        fenster.ziel = dies
        let-Wert = this.getter.call(this.vm, this.vm)
        Fenster.Ziel = nicht definiert
        Rückgabewert
    }
    
    aktualisieren() {
        const alterWert = dieser.Wert
        dieser.Wert = dies.get()
        this.cb.call(this.vm, this.value, alterWert)
    }
}

(3) Alle Schlüssel rekursiv erkennen (Observer)

Exportklasse Beobachter {
    Konstruktor(Wert) {
        dieser.Wert = Wert;
        
        wenn(!Array.isArray(Wert)) {
            this.walk(Wert)
        }
    }
    gehe(Objekt) {
        const keys = Objekt.keys(obj)
        für(lass i = 0; i < Schlüssel.Länge; i++) {
            defineReactive(Objekt, Schlüssel[i], Objekt[Schlüssel[i]])
        }
    }
}

Die Observer-Klasse macht alle Eigenschaften des Objekts responsive

2.Array-Änderungserkennung

(1) Bei der Nachverfolgung von Änderungen in Arrays werden Interceptors verwendet, um Prototypmethoden zu überschreiben

const arrayProto = Array.prototype
exportiere const arrayMethods = Object.create(arrayProto);
// Dasselbe Objekt wie der Array-Prototyp als Interceptor ['push','pop','shift','unshift','splice','sort','reverse'].forEach(function (method) {
    const original = arrayProto[Methode]
    Objekt.defineProperty(ArrayMethods, Methode, {
        Wert: Funktion Mutator (... args) {
              gib original.apply(dies, Argumente) zurück
        },
        aufzählbar: falsch,
        beschreibbar: true,
        konfigurierbar: true
    })
})

Der Interceptor-Override-Prototyp hat nur einen Satz

Wert.__proto__ = ArrayMethods

Wenn keine __proto__-Eigenschaft vorhanden ist, mountet Vue diese arrayMethods in das erkannte Array

Arrays ähneln Objekten darin, dass sie Abhängigkeiten in Gettern sammeln, während sich durch Arrays ausgelöste Abhängigkeiten in Interceptors befinden.

Die Abhängigkeiten des Arrays werden auf der Observer-Instanz gespeichert und müssen sowohl für Getter als auch für Interceptors zugänglich sein.

__ob__ ist ein nicht aufzählbares Attribut, der Wert dieses Attributs ist die aktuelle Observer-Instanz

Speichern Sie die Dep-Instanz im Observer-Attribut. Wenn der Wert bereits über ein __ob__-Attribut verfügt, ist es nicht notwendig, erneut eine Observer-Instanz zu erstellen, um eine wiederholte Erkennung von Wertänderungen zu vermeiden.

Senden Sie Benachrichtigungen wie Array-Abhängigkeiten

dies.__ob__.dep.notify();

(2) Spezifische Methoden zur Erkennung von Datenänderungen

Durchlaufen Sie jedes Element im Array und führen Sie die Beobachtungsfunktion aus, um Änderungen zu erkennen

beobachteArray(Elemente) {
    für(let i = 0; l = Elemente.Länge; i < l; i++) {
        beobachten(Elemente[i]);    
    }
}

Arrays müssen neue Elemente erkennen

Durch das Abfangen von Push-, Unshift-, Splice- und anderen Methoden und das Speichern von Argumenten in eingefügten

if(eingefügt) ob.observeArray(eingefügt)

Zusammenfassen:

Arrays verfolgen Änderungen anders als Objects, daher erstellen wir einen Interceptor, um den Array-Prototyp zu überschreiben und Änderungen zu verfolgen. Um den globalen Array.prototype nicht zu verunreinigen, verwenden wir nur __proto__ im Observer, um den Prototyp für das Array zu überschreiben, das Änderungen erkennen muss.

Arrays sammeln Abhängigkeiten auf die gleiche Weise wie Objekte, die in Gettern gesammelt, in Interceptors ausgelöst und Abhängigkeiten auf Observer-Instanzen gespeichert werden. Auf dem Observer markieren wir alle erkannten Daten mit __ob__ und speichern diese (Observer) auf __ob__. Dies dient hauptsächlich dazu, sicherzustellen, dass dieselben Daten nur einmal erkannt werden. Darüber hinaus können wir die auf der Observer-Instanz gespeicherten Abhängigkeiten problemlos über __ob__ abrufen. Das Array muss eine Schleife durchlaufen, damit jedes Array-Element reagiert. Wenn dem Array ein neues Element hinzugefügt wird, extrahieren wir die Parameter und verwenden dann observeArray, um Änderungen in den neuen Daten zu erkennen. Bei Arrays können nur Prototypmethoden abgefangen werden, und einige einzigartige Methoden können nicht abgefangen werden.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.