Optimierungsfähigkeiten und praktische Erfahrung beim Rendern von Listen in Vue

Optimierungskenntnisse und praktische Erfahrung im Listen-Rendering in Vue

Vorwort
Bei der Entwicklung von Webanwendungen mit Vue ist das Listen-Rendering eine häufige Anforderung. Wenn die Liste jedoch eine große Datenmenge enthält, können häufige DOM-Vorgänge zu einer Verschlechterung der Seitenleistung führen. Um dieses Problem zu lösen, werden in diesem Artikel einige Techniken zur Optimierung der Listenwiedergabe in Vue vorgestellt und praktische Erfahrungen und Codebeispiele bereitgestellt.

1. Vermeiden Sie die Verwendung des Index als Schlüsselwert.

Wenn Sie eine V-for-Schleife zum Rendern einer Liste in Vue verwenden, müssen Sie einen Schlüsselwert angeben, um jedes Element eindeutig zu identifizieren. In manchen Fällen bevorzugen Entwickler möglicherweise die Verwendung eines zirkulären Indexes als Schlüsselwert. Dieser Ansatz wird jedoch nicht empfohlen.

Es gibt einige Probleme bei der Verwendung des Index als Schlüsselwert. Wenn sich die Reihenfolge in der Liste ändert, rendert Vue das DOM mithilfe des Diff-Algorithmus neu. Wenn Sie den Index als Schlüsselwert verwenden, kann dies zu unnötigen DOM-Vorgängen führen und dadurch die Leistung beeinträchtigen. Daher sollten wir die eindeutige Kennung jedes Elements als Schlüsselwert verwenden.

Zum Beispiel:

d477f9ce7bf77f53fbcf36bec1b69b7a
ff6d136ddc5fdfeffaf53ff6ee95f185

<li v-for="item in items" :key="item.id">{{ item.name }}</li>

929d1f5ca49e04fdcb27f9465b944689
21c97d3a051048b8e55e3c8f199a54b2

2. Verwenden Sie v-show anstelle von v-if

In Vue, v- if Sowohl v-show als auch v-show können das Anzeigen und Ausblenden von DOM-Elementen steuern. Allerdings verursacht v-if einen gewissen Mehraufwand, da es das DOM-Element vollständig neu erstellt oder zerstört. Und v-show blendet DOM-Elemente nur ein oder aus, indem CSS-Eigenschaften geändert werden. Wenn wir daher häufig die Anzeige und das Ausblenden von Listenelementen wechseln müssen, sollten wir v-show anstelle von v-if verwenden.

Zum Beispiel:

d477f9ce7bf77f53fbcf36bec1b69b7a
ff6d136ddc5fdfeffaf53ff6ee95f185

<li v-for="item in items" :key="item.id" v-show="item.visible">{{ item.name }}</li>

929d1f5ca49e04fdcb27f9465b944689
21c97d3a051048b8e55e3c8f199a54b2

Drei. Lokalen Komponenten-Cache verwenden

Wenn jedes Element in einer Liste einem For entspricht Bei komplexeren Komponenten können wir den von Vue bereitgestellten lokalen Komponentencache verwenden, um die Leistung zu verbessern. Durch die Platzierung der Komponentendefinition innerhalb des 7c9485ff8c3cba5ae9343ed63c2dc3f7-Tags speichert Vue beim Wechsel zwischen Komponenten bereits gerenderte Komponenten zwischen und vermeidet so wiederholte DOM-Vorgänge.

Zum Beispiel:

d477f9ce7bf77f53fbcf36bec1b69b7a
ff6d136ddc5fdfeffaf53ff6ee95f185

<keep-alive>
  <item :key="item.id" v-for="item in items"></item>
</keep-alive>

929d1f5ca49e04fdcb27f9465b944689
21c97d3a051048b8e55e3c8f199a54b2

Vier. Verwenden Sie virtuelle Listen

Wenn die Datenmenge in der Liste sehr groß ist , können wir virtuelle Listen verwenden, um die Rendering-Leistung zu optimieren. Eine virtuelle Liste rendert nur die aktuell sichtbaren Listenelemente und nicht die gesamte Liste. Virtuelle Listen können implementiert werden, indem die Position und Größe jedes Listenelements dynamisch berechnet wird.

Das Folgende ist ein Beispiel für die Verwendung von vue-virtual-scroll-list, einem Vue-basierten Plugin für virtuelle Listen:

d477f9ce7bf77f53fbcf36bec1b69b7a
ff6d136ddc5fdfeffaf53ff6ee95f185

<virtual-list :size="items.length" :remain="10">
  <template v-slot="{ range }">
    <li v-for="index in range" :key="items[index].id">{{ items[index].name }}</li>
  </template>
</virtual-list>

929d1f5ca49e04fdcb27f9465b944689
21c97d3a051048b8e55e3c8f199a54b2

5. Verwenden Sie Paging-Laden

Wenn die Menge der Listendaten zu groß ist, können Sie Paging-Laden verwenden, um die Auswirkungen des gleichzeitigen Ladens einer großen Datenmenge auf die Seitenleistung zu verringern. Indem die Liste in mehrere Seiten unterteilt wird, jedes Mal nur die Daten der aktuellen Seite geladen werden und die Funktion zum Seitenwechsel bereitgestellt wird, kann der Rendering-Druck der Seite effektiv reduziert werden.

Das Folgende ist ein Beispiel für die Verwendung von vue-infinite-scroll, einem Vue-basierten Plug-in zum Laden von Seiten:

d477f9ce7bf77f53fbcf36bec1b69b7a
b3b4c2870ca397b75d2e0b1c03303414
ff6d136ddc5fdfeffaf53ff6ee95f185

<li v-for="item in items" :key="item.id">{{ item.name }}</li>

224f1b147a69b1f0e700f8d329635183
728bb42a8c3f26556de050cdaa6ab437
eee507863231767bdcc207556a71d96d

<button @click="loadMore">Load More</button>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
Importieren Sie InfiniteScroll aus ' vue-infinite-scroll'

return {
  items: [],
  page: 1
}

}

}
2cacc6d41bbb37262a98f745aa00fbf0

Fazit
Durch die oben genannten Optimierungsfähigkeiten und praktischen Erfahrungen können wir die Listendarstellung in Vue effizienter handhaben und die Seitenleistung optimieren. Eine angemessene Auswahl von Schlüsselwerten, die Verwendung von V-Show, lokales Komponenten-Caching, virtuelle Listen und das Laden von Seiten können die Geschwindigkeit beim Rendern von Seiten und das Benutzererlebnis verbessern. Ich hoffe, dass dieser Artikel Ihnen bei der Verwendung des Listenrenderings in Vue hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonOptimierungsfähigkeiten und praktische Erfahrung beim Rendern von Listen in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!