Vermeiden Sie den Missbrauch zum Lesen von Daten in Vue

Vorwort

In Vue ist die Datenoption eine gute Sache. Sobald Sie die Daten eingegeben haben, können Sie die Daten überall in einer Vue-Komponente lesen. Allerdings muss der Missbrauch zum Lesen von Daten in Daten vermieden werden. In dieser Spalte wird erklärt, wo Missbrauch vermieden werden kann und welche Konsequenzen sich aus Missbrauch ergeben.

1. Der Prozess der Verwendung dieser Daten zum Lesen in Daten

Im Vue-Quellcode werden den Daten Getter-Funktionen und Setter-Funktionen hinzugefügt, um sie in einen responsiven Datencode umzuwandeln. Der Code der Getter-Funktion lautet wie folgt:

Funktion reactiveGetter() {
 var-Wert = Getter? getter.call(Obj) : val;
 wenn (Dep.target) {
  dep.abhängig();
  wenn (KindOb) {
   childOb.dep.depend();
   wenn (Array.isArray(Wert)) {
    abhängigArray(Wert);
   }
  }
 }
 Rückgabewert
}

Wenn dies zum Lesen von Daten in Daten verwendet wird, wird die Getter-Funktion ausgelöst, in der var value = getter ? getter.call(obj) : val; verwendet wird, um den Wert zu erhalten, und dann wird return value ausgeführt, um den Zweck des Datenlesens zu erreichen.

Hieraus lässt sich die Schlussfolgerung ziehen, dass bei Vorhandensein von Dep.target die Verwendung dieses Elements zum Lesen von Daten in Daten Abhängigkeiten sammelt. Wenn dies missbraucht wird, um Daten in Daten zu lesen, werden Abhängigkeiten wiederholt gesammelt, was zu Leistungsproblemen führt.

2. Wann existiert Dep.target?

Dep.target wird durch die Abhängigkeit zugewiesen. Abhängigkeiten werden auch Beobachter oder Abonnenten genannt. Es gibt drei Arten von Abhängigkeiten in Vue, von denen zwei sehr häufig sind, nämlich watch (Listener) und computed (berechnete Eigenschaften). Es gibt auch eine versteckte Abhängigkeit, Rendering Watcher, die beim ersten Rendern der Vorlage erstellt wird.

Dep.target wird zugewiesen, wenn die Abhängigkeit erstellt wird, und die Abhängigkeit wird mit dem Konstruktor Watcher erstellt.

Funktion Watcher(vm, expOrFn, cb, Optionen, isRenderWatcher) {
 //...
 wenn (Typ von expOrFn === 'Funktion') {
  this.getter = expOrFn;
 } anders {
  this.getter = parsePath(expOrFn);
 }
 dieser.Wert = dieser.lazy ? undefiniert : dieser.get();
};
Watcher.prototype.get = Funktion get() {
 drückeZiel(dieses);
 versuchen {
  Wert = this.getter.call(vm, vm);
 } fangen (e) {
  
 }
 Rückgabewert
};
Dep.Ziel = null;
var ZielStack = [];
Funktion pushTarget(Ziel) {
 ZielStack.push(Ziel);
 Dep.Ziel = Ziel;
}

Im Konstruktor Watcher wird am Ende die Instanzmethode get ausgeführt und die Zuweisung von Dep.target zu pushTarget(this) wird in der Instanzmethode get ausgeführt.

Die Abhängigkeit wird erstellt, wenn die Vue-Seite oder -Komponente zum ersten Mal gerendert wird. Das Leistungsproblem dürfte also das Problem des langsamen ersten Renderings sein.

3. Wo kann man dies missbrauchen, um Daten in Daten zu lesen?

Wenn Dep.target vorhanden ist, führt die Ausführung dieser Codes, die dies missbrauchen, um Daten in Daten zu lesen, zu Leistungsproblemen. Daher müssen wir auch herausfinden, wo diese Codes geschrieben werden, damit sie ausgeführt werden. Mit anderen Worten: Wir müssen herausfinden, wo der Missbrauch von this zum Lesen von Daten in Daten zu Leistungsproblemen führt.

Im zweiten Abschnitt wird eingeführt, dass nach der Zuweisung von Depth.target value = this.getter.call(vm, vm) ausgeführt wird, wobei this.getter eine Funktion ist. Wenn dies zum Lesen von Daten verwendet wird, werden Abhängigkeiten gesammelt. Bei Missbrauch treten Leistungsprobleme auf.

this.getter wird während des Abhängigkeitserstellungsprozesses zugewiesen und this.getter ist für jede Abhängigkeit unterschiedlich. Lassen Sie mich sie unten einzeln vorstellen.

• this.getter , von dem watch (der Listener) abhängt, ist die Funktion parsePath , und sein Funktionsparameter ist das Objekt, das abgehört wird.

var bailRE = neuer RegExp(("[^" + (unicodeRegExp.source) + ".$_\\d]"));
Funktion parsePath(Pfad) {
 if (bailRE.test(Pfad)) {
  zurückkehren
 }
 var Segmente = Pfad.split('.');
 Rückgabefunktion (Objekt) {
  für (var i = 0; i < Segmente.Länge; i++) {
   wenn (!obj) {
    zurückkehren
   }
   obj = obj[Segmente[i]];
  }
  Rückgabeobjekt
 }
}

Im folgenden Code wird durch Übergeben von a und abc als Parameter an die Funktion parsePath eine Funktion zurückgegeben, die this.getter zugewiesen ist. Durch Ausführen this.getter.call(vm, vm) werden die Werte von this.a und this.abc abgerufen. Bei diesem Vorgang kommt es nicht zu einem Missbrauch zum Lesen von Daten in Daten.

betrachten:{
 a:Funktion(neuerWert, alterWert){
 //Mach etwas}
}
vm.$watch('abc', Funktion (neuerWert, alterWert) {
 // etwas tun })

• Es gibt zwei Typen von this.getter , auf die sich computed (berechnete Eigenschaften) verlassen. Wenn der Wert der berechneten Eigenschaft eine Funktion ist, dann ist this.getter diese Funktion. Wenn der Wert der berechneten Eigenschaft ein Objekt ist, dann ist this.getter der abgerufene Eigenschaftswert dieses Objekts und der abgerufene Eigenschaftswert ist ebenfalls eine Funktion. In dieser Funktion kann es zu einem Szenario kommen, in dem dies missbraucht wird, um Daten in Daten zu lesen. Der Code sieht beispielsweise wie folgt aus.

berechnet:{
 d:Funktion(){
  lass Ergebnis = 0;
  für (let-Schlüssel in this.a) {
   wenn(this.a[key].num > 20){
    Ergebnis += dies.a[Schlüssel].num + dies.b + dies.c;
   }anders{
    Ergebnis += dies.a[Schlüssel].num + dies.e + dies.f;
   }
  }
  Ergebnis zurückgeben;
 }
}

Bei der berechneten Eigenschaft d liegt ein Missbrauch zum Auslesen von Daten vor. Hier ist this.a ein Array. Zu diesem Zeitpunkt ist der Wert von Dep.target die Abhängigkeit der berechneten Eigenschaft d. In der Schleife this.a wird this verwendet, um die Daten von a, b, c, e und f abzurufen, sodass diese Daten einer Reihe komplexer logischer Operationen unterzogen werden, um wiederholt die Abhängigkeit der berechneten Eigenschaft d zu erfassen. Dies verlangsamt den Prozess zum Abrufen des Werts der berechneten Eigenschaft d und führt zu Leistungsproblemen.

• this.getter des Rendering-Watchers ist eine Funktion wie folgt:

updateComponent = Funktion() {
 vm._update(vm._render(), hydratisieren);
};

Unter diesen konvertiert vm._render() die vom Vorlagen-Template generierte Rendering-Funktion render in einen virtuellen DOM（VNode）：vnode = render.call(vm._renderProxy, vm.$createElement); Sehen wir uns ein Beispiel an, um zu veranschaulichen, was die Rendering-Funktion render ist.

Beispiel: Vorlage Vorlage:

<Vorlage>
 <div Klasse="wrap">
 <p>{{a}}<span>{{b}}</span></p>
 </div>
</Vorlage>

Die Rendering-Funktion „Render“ wird von Vue-Loader generiert, wie unten gezeigt:

(Funktion anonym() {
 mit(diesem) {
  return _c('div', {
   Attribute: {
    "Klasse": "Wrap"
   }
  }, [_c('p', [_v(_s(a)), _c('span', [_v(_s(b))])])])
 }
})

Die Funktion der with-Anweisung besteht darin, ein Standardobjekt für eine oder eine Gruppe von Anweisungen anzugeben. Beispielsweise ist with(this){ a + b } gleichbedeutend mit this.a + this.b Dann ist die Verwendung {{ a }} in der Vorlage gleichbedeutend mit der Verwendung von this zum Lesen der Daten a in data. Daher kann es in der von der Vorlage generierten Rendering-Funktion „Render“ zu Szenarien kommen, in denen diese missbraucht wird, um Daten in Daten zu lesen. Der Code sieht beispielsweise so aus:

<Vorlage>
 <div Klasse="wrap">
 <div v-for=Element in Liste>
  <div> {{ arr[item.index]['name'] }} </div>
  <div> {{ obj[item.id]['Alter'] }} </div>
 </div>
 </div>
</Vorlage>

Wenn v-for zum Durchlaufen des Listen-Arrays verwendet wird, werden damit die Daten von arr und obj in den Daten gelesen, sodass diese Daten einer Reihe komplexer logischer Operationen unterzogen werden, um diese Abhängigkeit wiederholt zu erfassen, was das anfängliche Rendern verlangsamt und Leistungsprobleme verursacht.

4. So vermeiden Sie den Missbrauch zum Lesen von Daten in Daten

Zusammenfassend lässt sich sagen, dass der Missbrauch zum Lesen von Daten in berechneten Eigenschaften und Vorlagen zu einer wiederholten Sammlung von Abhängigkeiten führt, was zu Leistungsproblemen führt. Wie können wir diese Situation vermeiden?

• So vermeiden Sie berechnete Eigenschaften
  

Um dies zu vermeiden, verwenden Sie die ES6-Objektdekonstruktionszuweisung. Der Wert der berechneten Eigenschaft ist eine Funktion, deren Parameter das von Vue instanziierte Objekt ist. Im obigen Beispiel des Missbrauchs in der berechneten Eigenschaft kann es wie folgt optimiert werden.

Vor der Optimierung:

berechnet:{
 d:Funktion(){
  lass Ergebnis = 0;
  für (let-Schlüssel in this.a) {
   wenn(this.a[key].num > 20){
    Ergebnis += dies.a[Schlüssel].num + dies.b + dies.c;
   }anders{
    Ergebnis += dies.a[Schlüssel].num + dies.e + dies.f;
   }
  }
  Ergebnis zurückgeben;
 }
}

Nach der Optimierung:

berechnet: {
 d({ a, b, c, e, f }) {
 lass Ergebnis = 0;
 für (let-Taste in a) {
  wenn (a[Schlüssel].num > 20) {
  Ergebnis += a[Schlüssel].Nummer + b + c;
  } anders {
  Ergebnis += a[Schlüssel].num + e + f;
  }
 }
 Ergebnis zurückgeben;
 }
}

Im obigen Beispiel wird die Destrukturierungszuweisung verwendet, um a, b, c, e und f in Daten im Voraus den entsprechenden Variablen a, b, c, e und f zuzuweisen. Anschließend kann über diese Variablen in den berechneten Eigenschaften auf Daten zugegriffen werden, ohne die Abhängigkeitssammlung der entsprechenden Daten in Daten auszulösen. Auf diese Weise werden die Daten in den Daten nur einmal gelesen und die Abhängigkeitssammlung nur einmal ausgelöst. Dadurch werden Leistungsprobleme vermieden, die durch wiederholte Abhängigkeitssammlung verursacht werden.

• So vermeiden Sie eine Vorlage
  

Verarbeiten Sie die von der v-for-Schleife verwendeten Daten im Voraus und lesen Sie in der v-for-Schleife keine Array- oder Objekttypdaten. Im obigen Beispiel des Missbrauchs in der Vorlagenvorlage kann es wie folgt optimiert werden.

Vorausgesetzt, dass es sich bei Liste, arr und obj um vom Server zurückgegebene Daten handelt und dass arr und obj bei der Darstellung in keinem Modul verwendet werden, können sie auf diese Weise optimiert werden.

Vor der Optimierung:

<Vorlage>
 <div Klasse="wrap">
 <div v-for=Element in Liste>
  <div> {{ arr[item.index]['name'] }} </div>
  <div> {{ obj[item.id]['Alter'] }} </div>
 </div>
 </div>
</Vorlage>

Nach der Optimierung:

<Vorlage>
 <div Klasse="wrap">
 <div v-for=Element in Listendaten>
  <div{{item.name}} </div>
  <div>{{item.age}}</div>
 </div>
 </div>
</Vorlage>
<Skript>
const arr = [];
const obj = {}
Standard exportieren {
 Daten() {
 zurückkehren {
  Liste: [],
 }
 },
 berechnet: {
 listData: Funktion ({list}) {
  Liste.fürJeden(Element => {
  Artikel.name = arr[Artikel.index].name;
  Artikel.Alter = obj[Artikel-ID].Alter;
  })
  Liste zurückgeben;
 }
 },
}
</Skript>

Oben sind die Details beschrieben, wie Sie den Missbrauch dieser Funktion zum Lesen von Daten in Vue vermeiden können. Weitere Informationen zum Vermeiden des Missbrauchs dieser Funktion in Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!