Vue-Entwicklungserfahrung und Kompetenzaustausch

Diese Serie zeichnet einige der Erfahrungen und Techniken auf, die ich während eines Jahres der Vue-Entwicklung zusammengefasst habe.

Verwenden Sie Object.freeze(), um die Leistung zu verbessern

Object.freeze() ist eine neue Funktion von ES5, die ein Objekt einfrieren kann, um zu verhindern, dass das Objekt geändert wird.

vue 1.0.18+ bietet Unterstützung dafür. Für Objekte, die mit Freeze in Data oder Vuex eingefroren wurden, konvertiert Vue keine Getter und Setter.

Wenn Sie über ein großes Array oder Objekt verfügen und sicher sind, dass die Daten nicht geändert werden, kann die Verwendung von Object.freeze() die Leistung erheblich verbessern. In meiner tatsächlichen Entwicklung beträgt diese Verbesserung etwa das 5- bis 10-fache, und das Vielfache steigt mit der Datenmenge.

Darüber hinaus friert Object.freeze() den Wert ein und Sie können den Verweis auf die Variable weiterhin ersetzen. Zum Beispiel:

{{ item.value }}

new Vue({
 data: {
 // vue不会对list里的object做getter、setter绑定
 list: Object.freeze([
  { value: 1 },
  { value: 2 }
 ])
 },
 created () {
 // 界面不会有响应
 this.list[0].value = 100;
 
 // 下面两种做法，界面都会响应
 this.list = [
  { value: 100 },
  { value: 200 }
 ];
 this.list = Object.freeze([
  { value: 100 },
  { value: 200 }
 ]);
 }
})

Vues Dokumentation erwähnt diese Funktion nicht, aber es ist ein sehr praktischer Ansatz. Für große Datenmengen, die nur angezeigt werden, kann Object.freeze zur Verbesserung der Leistung verwendet werden.

Verwenden Sie vm.$compile, um dom zu kompilieren

Die $compile-Funktion kann verwendet werden, um vue manuell aufzurufen, um dom zu kompilieren. Diese Funktion kann nützlich sein, wenn Sie den von einem jQuery-Plug-in generierten oder vom Server zurückgegebenen HTML-Code verarbeiten müssen. Beachten Sie jedoch, dass es sich um eine private API handelt und sich jederzeit ändern kann. Dieser Ansatz widerspricht der Philosophie von Vue. Nur als letzten Ausweg verwenden.

new Vue({
 data: {
 value: 'demo'
 },
 created () {
 let dom = document.createElement('div');
 dom.innerHTML = '{{ value }}';
 this.$compile(dom);
 }
})

Vernünftige Verwendung von track-by="$index"

Track-by ist eine von Vue bereitgestellte Optimierungsmethode für Schleifen . Sie können den Dom mit derselben ID in mehreren V-Fors wiederverwenden. Wenn Ihre Daten keine eindeutige ID haben, können Sie auch track-by="$index" verwenden, Sie müssen sich jedoch einiger Nebenwirkungen bewusst sein.

Zum Beispiel:

new Vue({
 data: {
 list: [1, 2, 3]
 }
})
<div id="demo-1">
 <p v-for="item in list">{{ item }}</p>
</div>
<div id="demo-2">
 <p v-for="item in list" track-by="$index">{{ item }}</p>
</div>

Führen Sie zu diesem Zeitpunkt this.list = [4, 5, 6] aus, was sein kann beobachtet durch F12 Zu diesem Zeitpunkt werden alle DOM in Demo-1 gelöscht und dann wird die Liste recycelt, um das DOM zu generieren. Demo-2 löscht jedoch nicht das DOM, sondern ändert nur ihre Textraster in 4, 5, und 6. Dies ist der Effekt von track-by="$index", das den Dom mit demselben $index in v-for zweimal wiederverwendet.

Dies ist eine gute Optimierungsmethode, die jedoch nicht auf alle Szenarien anwendbar ist. Wenn die Schleife beispielsweise Formularsteuerelemente oder Unterkomponenten enthält, führt dies dazu, dass der Dom nicht gelöscht und neu generiert wird Bei der zweiten Ausführung ändert sich der Wert des ursprünglichen Formularsteuerelements nicht. Sie können dieses Beispiel sehen: https://jsfiddle.net/jysboza9/1/

Richtlinie nicht missbrauchen

Im Internet gibt es ein Sprichwort, das besagt, dass alle DOM-Operationen in Anweisungen gekapselt werden sollten. In der tatsächlichen Entwicklung denke ich, dass diesem Dogma nicht gefolgt werden sollte. Ob Anweisungen verwendet werden, sollte davon abhängen, welche Funktion Sie implementieren, und nicht davon, ob der Dom manipuliert wird. Wenn Sie beispielsweise Vue zum Kapseln eines jQuery-Plug-Ins verwenden möchten, sehen wir uns an, welche der folgenden Kapselungsmethoden besser ist:

<!-- component -->
<datepicker></datepicker>
<!-- directive -->
<div v-datepicker="{options}"></div>

Persönlich Ich denke, es ist zweifellos die erste Methode. Datepicker ist eine unabhängige Komponente. Es ist Ihnen egal, ob sie das DOM intern betreibt oder ob sie das jQuery-Plug-in kapselt.

Wann verwenden Sie also Befehle? Werfen wir einen Blick auf die vom Browser nativ bereitgestellten Befehle:

<a title="这是一个指令"></a>
<p title="这是一个指令"></p>
<div title="这是一个指令"></div>

Das Titelattribut stellt Tooltip-Funktionen für verschiedene Tags bereit. Dies ist ein Befehl. Eine Direktive sollte eine unabhängige Funktion darstellen, die die gleiche Funktionalität für verschiedene Tags und Komponenten bereitstellen kann.