Beispiel für handschriftliches Vue2.0-Daten-Hijacking

1: Webpack erstellen

Erstellen Sie einfach die Webpack-Konfiguration. Erstellen Sie einen neuen Ordner und initialisieren Sie ihn. Erstellen Sie dann eine neue Datei webpack.config.js, die die Konfigurationsdatei von webpack ist. Installieren Sie einige einfache Abhängigkeiten.

npm installiere webpack webpack-cli webpack-dev-server -D

Erstellen Sie eine Datei „public/index.html“ und „src/index.js“ im selben Verzeichnis wie die Export- und Eintragsdateien.

jKonfigurieren Sie webpack einfach in der Datei webpack.config.js:

const path = require('Pfad');
const HtmlWebpackPlugin = erfordern('html-webpack-plugin');
modul.exporte = {
 Eintrag: './src/index.js',
 Ausgabe: {
  Dateiname: „bundle.js“,
  Pfad: Pfad.auflösen(__dirname, 'dist')
 },
 lösen: { 
  Module:
  Pfad.auflösen(__dirname, ''), Pfad.auflösen(__dirname, 'node_modules')  
  ] 
 },
 Plugins: [  
  neues HtmlWebpackPlugin({   
   Vorlage: Pfad.Auflösen(__Verzeichnisname, 'public/index.html')  
  }) 
 ]
}

Ok, nachdem wir Webpack konfiguriert haben, können wir mit dem Thema beginnen.

2. Datendiebstahl

In v2 wird vue über new Vue(el, options) instanziiert. Wir müssen eine neue Vue-Datei erstellen und die Methode zur Datenentführung in Vue vereinheitlichen.

Erstellen Sie eine neue vue/index.js als Einstiegsdatei für den Datendiebstahl.

importiere {initState} aus './init.js';

Funktion Vue (Optionen) {
 this._init(Optionen); // Dateninitialisierung}
Vue.prototype._init = Funktion (Optionen) {
 var vm = options; // Instanz speichern vm.$options = options; // Instanz mounten initState(vm); // Instanzinitialisierung }

Erstellen Sie eine neue init.js-Datei, um die Instanz zu initialisieren:

Achten Sie während der Initialisierung auf einige Punkte:

1. Berechnungen, Beobachtungen und Daten müssen separat verarbeitet werden.

2. Ändern Sie benutzerdefinierte Daten nicht direkt.

3. Die offizielle Bezeichnung von Daten als Funktion soll sicherstellen, dass die Komponente einen eigenen Gültigkeitsbereich hat und nicht verunreinigt ist. Ein direkter Zugriff auf die Datenfunktion ist nicht möglich und erfordert eine automatische Ausführung. Daten können auch ein Objekt sein (diese Situation muss berücksichtigt werden)

4. Diese Methode zum Abrufen von Daten erfolgt über vm._data.xxx. In Vue werden zum Abrufen jedoch keine Daten benötigt. Daher müssen sie hier abgefangen und neu geschrieben werden.

5. Interne Referenztypen erfordern Rekursion

Funktion initState (vm) {
 var options = vm.$options; // Optionen abrufen
 wenn (Optionen.Daten) {
  initData(vm); // Weil „Computed“ und „Watch“ hier initialisiert werden müssen, initialisiere „data“};

Funktion initData (vm) {
 var data = vm.$options.data; // Daten neu zuweisen, benutzerdefinierte Daten nicht ändern
 Daten = vm._Daten = Datentyp === 'Funktion' ? Datenaufruf(vm) : Daten || {};
 für (var Schlüssel in Daten) {
  proxyData(vm, '_data', key); // Den Wert der Daten neu zuweisen};
 observe(vm._data); //Beobachte die internen Daten}

Erstellen Sie eine neue Datei proxy.js als Proxy-Ebene:

Funktion ProxyData(vm, Ziel, Schlüssel) { 
 Objekt.defineProperty(vm, Schlüssel, {  
   erhalten () {   
   // Das Abfangen erfolgt hier: vm.xxx => vm._data.xxx   
   return vm[Ziel][Schlüssel];  
  },  
  setze(neuerWert) {   
   // vm.xxx = yyy ===> vm._data.title = yyy   
   vm[Ziel][Schlüssel] = neuerWert;  
  } 
 }) 
}
Standard-Proxydaten exportieren;

Nachdem das Zugriffsproblem gelöst wurde, müssen wir die internen Datenelemente rekursiv durchführen. beobachten(vm._data);

Erstellen Sie eine neue observe.js:

Funktion beobachten(Daten) {
 wenn (Datentyp !== 'Objekt' || Daten = null) return;
 return new Observer(data); // Wenn es ein Anwendungstyp ist, füge direkt einen Beobachter hinzu} 

Erstellen Sie einen neuen Beobachter: observer.js

Funktion Beobachter(Daten) {
 wenn (Array.isArray(data)) {
  // Array-Daten werden verarbeitet._proto_ = arrMethods; 
 }
 anders {
  //Objekt verarbeiten this.walks(data);
 }
}
Observer.prototype.walks = Funktion (Daten) {
 let keys = Object.keys(data); // Alle Schlüssel unter data abrufen, und es ist immer noch ein Array for (var i = 0 ; i < keys.length ; i++) {  
  var Schlüssel = Schlüssel[i];  
  var Wert = Daten[Schlüssel];  
  defineReactiveData(data, key, value); // Jeder generiert responsive Daten neu }}

Erstellen Sie ein neues reactive.js zur Handhabung von Objekten und anderen responsiven

Funktion defineReactiveData (Daten, Schlüssel, Wert) { 
 observe(value); // Dann rekursiv auf die untergeordneten Elemente anwenden. 
 Object.defineProperty(Daten, Schlüssel, {  
  erhalten() {   
   Rückgabewert;  
  },  
  setze (neuerWert) {   
   wenn (neuerWert === Wert) return;   
   Wert = neuerWert; // Änderung auslösen } 
 }
 )
};

Ok, das Objektdaten-Hijacking wird hier behandelt, und der Rest muss sich mit dem Array befassen

In V2 werden 7 Methoden des Prototyps neu geschrieben, um Datenentführungen zu erreichen.

Array entführen:

Erstellen Sie eine neue Array.js-Datei:

importiere {ARR_METHODS} aus „./config.js“;  
 // Eine Sammlung von 7 Array-Methoden importiere observeArr von './observeArr.js';
var originArrMethods = Array.prototype, 
arrMethods = Objekt.create(originArrMethods); 
ARR_METHODS.map(Funktion (m) { 
 arrMethods[m] = Funktion () {  
  var args = Array.prototype.slice.call(arguments); // Klassenarray in Array konvertieren var rt = originArrMethods[m].apply(this, args);  
  var neuesArr;  
  Schalter (m) {   
   Fall 'push':   
   Fall 'ushift':     
    neuesArr = Argumente;   
   Fall 'Spleißen':    
    neuesArr = args.slice(2);    
    brechen;   
   Standard:     
    brechen; };  
  neuesArr && beobachtenArr(neuesArr);  
  zurück rt; 
  } 
}); 
 exportiere { arrMethods }

observeArr(newArr): Arrays können auch verschachtelt sein, daher müssen die Daten beobachtet werden.

importiere „Observe“ aus „./observe“;
Funktion observeArr (arr) { 
 für (var i = 0; i < arr.length; i++) {  
  observe(arr[i]); // Zurück zur Beobachtung. 
 }
}
Standard-ObserverArr exportieren;

Drei: Zusammenfassung

Der grundlegende Prozess ist wie folgt: Es geht nicht nur um das Abrufen und Festlegen von Daten mit object.defineProperty. Fassen Sie den Hauptprozess zusammen:

(1): Während der Initialisierung: Speichern Sie die Instanz und mounten Sie die Instanz. Die Initialisierung der Daten erfolgt über die Methode initState. Dabei handelt es sich hauptsächlich um Daten, aber auch um Berechnungen und Überwachungen, die verarbeitet werden müssen.

(2): Rufen Sie initData() auf. Weisen Sie die Daten neu zu, führen Sie dann die Daten aus, ändern Sie die Art und Weise des Benutzers zum Abrufen der Datenattribute in this.xxx und beobachten Sie (Daten).

(3): Beim Beobachten (von Daten) müssen Sie die Daten beurteilen. Wenn es sich um einen Referenztyp handelt, müssen Sie einen Beobachter hinzufügen. Gleichzeitig bestimmt der Beobachter, ob die Daten ein Array oder ein Objekt sind. Das Objekt löst object.defineProperty direkt erneut aus und beobachtet den internen Teil erneut. Wenn es sich um ein Array handelt, verwenden Sie direkt die 7 Array-Methoden und beobachten Sie dann weiter das Innere des Arrays.

Oben sind die Einzelheiten des Beispiels für handschriftlichen Vue2.0-Datendiebstahl aufgeführt. Weitere Informationen zum handschriftlichen Vue-Datendiebstahl finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!