Der Kern der Implementierung des responsiven Prinzips von Vue2 und Vue3

Einführung in Vue

Vue.js ist ein progressives Open-Source-JavaScript-Frontend-Framework, das hauptsächlich zum Erstellen von Benutzeroberflächen und Single-Page-Anwendungen (SPA) verwendet wird. Vue.js lässt sich problemlos in andere Bibliotheken oder bestehende Projekte integrieren und gilt als effektive Möglichkeit, reaktionsfähige datengesteuerte moderne Webanwendungen zu entwickeln.

Kernfunktionen von Vue.js:

1. Responsive Datenbindung: Vue.js kann durch bidirektionale Datenbindung auf Benutzereingaben und Seitenänderungen reagieren.
2. Komponentisierung: Mit Vue.js können Entwickler eine einzelne Komponente in ein unabhängiges Modul umwandeln, das eine hervorragende Leistung aufweist und wiederverwendet werden kann.
3. Vorlagenbasierte Syntax: Vue.js bietet eine Vorlagensyntax, die es Entwicklern ermöglicht, einfach HTML-Vorlagen zu schreiben und diese an Vue.js-Komponenten zu binden.

Das responsive Prinzip von Vue2

Das Reaktionsprinzip von Vue2 basiert Object.defineProperty()auf , das die Eigenschaften von Objekten definieren und sie kapern kann. Wenn sich der Eigenschaftswert ändert, kann Vue die Änderung erkennen und den entsprechenden Seiteninhalt neu rendern.

Das spezifische Implementierungsprinzip lautet wie folgt:

1. In der Initialisierungsphase von Vue entführt Vue das eingehende dataObjekt und datakonvertiert alle Eigenschaften des Objekts in getter/setterdas Formular .
2. Wenn Daten auf der Seite verwendet werden, löst Vue getterdie Funktion und so Watcherdas aktuelle (Beobachter-)Objekt zur Abhängigkeit der aktuellen Eigenschaft hinzufügt.
3. Wenn sich die Daten ändern, erkennt Vue die Änderung über den Listener und löst setterdie Funktion . Dadurch werden alle Abhängigkeiten unter der Eigenschaft benachrichtigt, Watcherdie aktualisiert werden müssen.
4. WatcherNachdem das Objekt benachrichtigt wurde, sendet es eine Nachricht an die entsprechende Komponente, um zu benachrichtigen, dass die Ansicht erneut gerendert werden muss, um die gesamte Seite zu aktualisieren.

Es ist zu beachten, dass Vue2 nur die Änderungen von Objekteigenschaften überwachen kann und nicht die Änderungen beim Hinzufügen/Löschen von Objekteigenschaften und Array-Methoden. Daher können wir Vue.set()die Methode oder Vue.delete()verwenden push(), pop(), splice(), shift(), unshift()Methoden usw. zum Bearbeiten von Arrays.

Der Beispielcode für die Datenentführung von Vue2 lautet wie folgt:

const data = {
    
     msg: 'Hello Vue' }

Object.defineProperty(data, 'msg', {
    
    
  get() {
    
    
    console.log('get');
    return val;
  },
  set(newValue) {
    
    
    console.log('set', newValue);
    val = newValue;
  }
})

Detaillierte Erklärung von Object.defineProperty()

Object.defineProperty() ist eine neue Methode in ES5, die verwendet wird, um neue Eigenschaften für Objekte zu definieren oder Eigenschaften von Objekten zu ändern. Die Syntax lautet wie folgt:

Object.defineProperty(obj, prop, descriptor)

Die Bedeutung der Parameter:

• obj: Das Objekt, dessen Eigenschaften definiert werden sollen.
• prop: Der Name der Eigenschaft, die definiert oder geändert werden soll.
• Deskriptor: Das Attributdeskriptorobjekt, das definiert oder geändert werden muss.

Das Eigenschaftsdeskriptorobjekt enthält die folgenden optionalen Eigenschaften:

• Wert: Der Wert des Attributs, der standardmäßig nicht definiert ist.
• beschreibbar: Wenn „true“, kann der Wert der Eigenschaft durch den Zuweisungsoperator geändert werden, der Standardwert ist „false“.
• aufzählbar: Wenn true, kann die Eigenschaft beim Aufzählen von Objekteigenschaften aufgezählt werden. Der Standardwert ist false.
• konfigurierbar: Wenn true, können Sie die Methode Object.defineProperty() verwenden, um den Deskriptor der Eigenschaft zu ändern. Der Standardwert ist false.
• get: Methode zum Lesen von Attributen.
• set: Attributzuweisungsmethode.

Nachteile von Object.defineProperty()

• Die Änderungen des Arrays können nicht überwacht werden. Definieren Sie die Methode, die das ursprüngliche Array
  Vue2 ändert, als Mutationsmethode. Mutationsmethoden wie etc. können nicht auslösen . Nicht mutierende Methoden wie etc. verändern das ursprüngliche Array nicht, sondern geben ein neues Array zurück. Der beste Ansatz besteht darin , diese Mutationsmethoden neu zu schreiben, um Array-Änderungen zu überwachen.
  push、pop、shift、unshift、splice、sort、reverseset
filter，concat，slice
Vue2
• Jede Eigenschaft des Objekts muss durchlaufen werden. In den meisten
  Fällen ist es notwendig, mit ihnen zusammenzuarbeiten und sie zu durchlaufen, sodass eine zusätzliche Verschachtelungsebene vorhanden ist. Und wenn eine bestimmte Eigenschaft des Objekts aufgrund der Durchquerung nicht „entführt“ werden muss, wird zu diesem Zeitpunkt dennoch „Entführung“ hinzugefügt.Object.definePropertyObject.keys
  
• Verschachtelte Objekte müssen tief durchquert werden.
  Wenn ein Objekt tief verschachtelt ist, muss es Schicht für Schicht durchlaufen werden Object.defineProperty(), bis .

Das responsive Prinzip von Vue3

Das Reaktionsprinzip von Vue3 verwendet hauptsächlich ES6 Proxyanstelle von Object.defineProperty()Vue2, um eine effizientere und leistungsfähigere Datenentführung und Reaktionsfähigkeit zu erreichen.

Proxy-Objekte können Datenhijacking durchführen, indem sie Zugriffs- und Änderungsdaten abfangen. Das Reflect-Objekt bietet flexiblere und benutzerfreundlichere Methoden zur Datenbearbeitung. Sie können beispielsweise Reflect.has() verwenden, um zu überprüfen, ob ein Objekt eine bestimmte Eigenschaft hat, und Reflect.defineProperty() anstelle von Object.defineProperty( verwenden. ).

Das spezifische Implementierungsprinzip lautet wie folgt:

1. In der Initialisierungsphase von Vue3 stellt Vue3 das eingehende dataObjekt unter ProxyVerwendung des Objekts ,new Proxy(target, handler) d .targethandlertarget

2. Wenn die Daten auf der Seite verwendet werden, löst Vue3 getden Vorgang , ruft das Proxy-Objekt handler.get()auf, handlererfasst den Vorgang und Watcherfügt das aktuelle (Beobachter-)Objekt zur Abhängigkeit der aktuellen Eigenschaft hinzu.

3. Wenn sich die Daten ändern, erkennt Vue3 die Änderung über den Listener und löst setden den Daten entsprechenden Vorgang Das Proxy-Objekt handler.set()wird aufgerufen, wodurch alle abhängigen „Watcher“-Objekte unter der Eigenschaft zur Aktualisierung benachrichtigt werden.

4. WatcherNachdem das Objekt benachrichtigt wurde, sendet es eine Nachricht an die entsprechende Komponente, um zu benachrichtigen, dass die Ansicht erneut gerendert werden muss, um die gesamte Seite zu aktualisieren.

Der Code zum Implementieren der Datenreaktionsfähigkeit mithilfe von Proxy-Objekten in Vue3 lautet wie folgt:

const data = {
    
     msg: 'Hello Vue' }

const reactiveData = new Proxy(data, {
    
    
  get(target, key) {
    
    
    console.log('get');
    return target[key];
  },
  set(target, key, value) {
    
    
    console.log('set');
    target[key] = value;
    return true;
  }
})

Im obigen Code wirddata das Objekt über das Proxy-Objekt als Proxy verwendet . Beim Zugriff auf die Eigenschaften des Objekts wird die Funktion get() im Proxy-Objekt aufgerufen; beim Festlegen der Eigenschaft wird die Funktion set() im Proxy-Objekt aufgerufen . In den Funktionen get() und set() kann das Lesen und Zuweisen von Attributen abgefangen werden, um die Reaktionsfähigkeit von Daten zu realisieren.reactiveDatareactiveData

Detaillierter Proxy

Proxy ist ein neues Objekt, das in ES6 hinzugefügt wurde. Es wird verwendet, um ein anderes Objekt zu vertreten und eine Reihe von Vorgängen wie Lesen, Zuweisen und Definieren von Eigenschaften des Objekts abzufangen. Seine Syntax lautet wie folgt:

new Proxy(target, handler)

Parameter im Proxy:

• Ziel: Das Zielobjekt, das als Proxy verwendet werden soll.
• Handler: Ein Objekt, dessen Eigenschaft eine Hook-Funktion (Trap) ist, die zum Abfangen der Operation des Proxy-Objekts verwendet wird.

Handler enthält die folgenden optionalen Hook-Funktionen (Trap):

• get(target, prop): Wird verwendet, um den Lesevorgang des Objekts abzufangen.
• set(target, prop, value): Wird zum Abfangen der Zuweisungsoperation des Objekts verwendet.
• has(target, prop): wird zum Abfangen des in Betrieb befindlichen Objekts verwendet.
• deleteProperty(target, prop): wird zum Abfangen von Löschvorgängen verwendet.
• apply(target, thisArg, args): Wird zum Abfangen von Funktionsaufrufen verwendet.
• Konstrukt(Ziel, Argumente): Wird zum Abfangen der neuen Operation verwendet.

Vorteile von Proxy

• ProxyStatt Eigenschaften können Objekte direkt überwacht werden;
• ProxySie können die Änderungen des Arrays direkt überwachen;
• ProxyWas zurückgegeben wird, ist ein neues Objekt. Wir können das neue Objekt nur bedienen, um den Zweck zu erreichen, aber wir Object.definePropertykönnen nur die Objekteigenschaften durchlaufen und direkt ändern.