Compétences en optimisation et expérience pratique du rendu de liste dans Vue

Compétences en optimisation et expérience pratique du rendu de liste dans Vue

Avant-propos
Dans le processus de développement d'applications Web à l'aide de Vue, le rendu de liste est une exigence courante. Cependant, lorsque la liste contient une grande quantité de données, des opérations DOM fréquentes peuvent entraîner une dégradation des performances de la page. Afin de résoudre ce problème, cet article présentera quelques techniques d'optimisation du rendu de liste dans Vue et fournira une expérience pratique et des exemples de code.

1. Évitez d'utiliser l'index comme valeur clé

Lorsque vous utilisez la boucle v-for pour afficher une liste dans Vue, vous devez fournir une valeur clé pour identifier de manière unique chaque élément. Dans certains cas, les développeurs peuvent préférer utiliser un index circulaire comme valeur clé. Cependant, cette approche n'est pas recommandée.

L'utilisation de l'index comme valeur clé pose quelques problèmes. Lorsque l'ordre dans la liste change, Vue restituera le DOM via l'algorithme diff. Si vous utilisez index comme valeur clé, cela peut entraîner des opérations DOM inutiles, réduisant ainsi les performances. Par conséquent, nous devons utiliser l’identifiant unique de chaque élément comme valeur clé.

Par exemple :

d477f9ce7bf77f53fbcf36bec1b69b7a
ff6d136ddc5fdfeffaf53ff6ee95f185

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

929d1f5ca49e04fdcb27f9465b944689
21c97d3a051048b8e55e3c8f199a54b2

2. Utilisez v-show au lieu de v-if

Dans Vue, v- if v-show et v-show peuvent contrôler l'affichage et le masquage des éléments DOM. Cependant, v-if entraîne une surcharge supplémentaire, car il recrée ou détruit complètement l'élément DOM. Et v-show masque ou affiche uniquement les éléments DOM en modifiant les propriétés CSS. Par conséquent, lorsque nous devons fréquemment changer l'affichage et le masquage des éléments de la liste, nous devons utiliser v-show au lieu de v-if.

Par exemple :

d477f9ce7bf77f53fbcf36bec1b69b7a
ff6d136ddc5fdfeffaf53ff6ee95f185

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

929d1f5ca49e04fdcb27f9465b944689
21c97d3a051048b8e55e3c8f199a54b2

Trois. Utiliser le cache de composants local

Lorsque chaque élément d'une liste correspond à un Pour. des composants plus complexes, nous pouvons utiliser le cache de composants local fourni par Vue pour améliorer les performances. En plaçant la définition du composant dans la balise 7c9485ff8c3cba5ae9343ed63c2dc3f7, Vue mettra en cache les composants déjà rendus lors du basculement entre les composants, évitant ainsi les opérations DOM répétées.

Par exemple :

d477f9ce7bf77f53fbcf36bec1b69b7a
ff6d136ddc5fdfeffaf53ff6ee95f185

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

929d1f5ca49e04fdcb27f9465b944689
21c97d3a051048b8e55e3c8f199a54b2

Quatre Utiliser des listes virtuelles

Lorsque la quantité de données dans la liste est très importante. , nous pouvons utiliser des listes virtuelles pour optimiser les performances de rendu. Une liste virtuelle affichera uniquement les éléments de liste actuellement visibles, plutôt que la liste entière. Les listes virtuelles peuvent être implémentées en calculant dynamiquement la position et la taille de chaque élément de la liste.

Ce qui suit est un exemple d'utilisation de vue-virtual-scroll-list, un plugin de liste virtuelle basé sur Vue :

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. Utiliser le chargement de pagination

Lorsque la quantité de données de liste est trop importante, vous pouvez utiliser le chargement de pagination pour réduire l'impact du chargement simultané d'une grande quantité de données sur les performances de la page. En divisant la liste en plusieurs pages, en chargeant uniquement les données de la page actuelle à chaque fois et en fournissant la fonction de commutation de pagination, la pression de rendu de la page peut être efficacement réduite.

Ce qui suit est un exemple d'utilisation de vue-infinite-scroll, un plug-in de chargement de pagination basé sur Vue :

d477f9ce7bf77f53fbcf36bec1b69b7a
9726c7d46eac502d078224873aa56fb8
ff6d136ddc5fdfeffaf53ff6ee95f185

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

224f1b147a69b1f0e700f8d329635183
44bd899116dd53ca9e9f8b0c0e4a7df1
eee507863231767bdcc207556a71d96d

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

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
importer InfiniteScroll depuis ' vue-infinite-scroll'

export par défaut {
data() {

return {
  items: [],
  page: 1
}

},
méthodes : {

loadMore() {
  // AJAX请求获取下一页数据
  // this.items = [...this.items, ...newData]
  this.page++
}

},
Mounted() {

// 初始化分页加载插件
// this.$refs.infiniteScroll.addEventListener('scrolled', this.loadMore)

},
beforeDestroy() {

// 销毁分页加载插件
// this.$refs.infiniteScroll.removeEventListener('scrolled', this.loadMore)

}
}
2cacc6d41bbb37262a98f745aa00fbf0

Conclusion
Grâce aux compétences d'optimisation et à l'expérience pratique ci-dessus, nous pouvons gérer le rendu des listes plus efficacement dans Vue et optimiser les performances des pages. Une sélection raisonnable de valeurs clés, l'utilisation de v-show, la mise en cache des composants locaux, les listes virtuelles et le chargement de pagination peuvent améliorer la vitesse de rendu des pages et l'expérience utilisateur. J'espère que cet article vous sera utile dans le processus d'utilisation du rendu de liste dans Vue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!