How to use v-memo and v-once
Les performances de rendu sont une mesure essentielle pour les développeurs front-end. Pour chaque seconde que prend le rendu de votre page, le taux de rebond augmente.
Et lorsqu'il s'agit de créer une expérience utilisateur fluide ? Un retour d'information quasi instantané est essentiel pour offrir aux utilisateurs une expérience d'application réactive.
Avec les framework front-end modernes comme Vue, il existe des moyens pour les développeurs d'améliorer les performances de leurs applications.
Il existe plusieurs façons d'optimiser le rendu des applications Vue, allant du défilement virtuel à l'optimisation de vos éléments v-for.
Mais un moyen extrêmement simple d'optimiser le rendu consiste à ne rendre à nouveau que ce qui est nécessaire.
Chaque fois que les données d'un composant changent, ce composant et ses enfants seront rendus à nouveau. Il existe des moyens d'éliminer les tâches inutiles avec deux directives Vue moins utilisées : v-once et v-memo.
Entrons dans le vif du sujet et voyons comment nous pouvons les utiliser dans une application.
Les directives Vue sont des attributs HTML spéciaux qui vous permettent de contrôler la façon dont Vue rend votre template.
v-once
La directive v-once est une directive Vue.js qui est utilisée pour éviter les re-renders non souhaitées d'un élément. Elle traite l'élément comme un contenu statique après l'avoir rendu une fois pour la première fois. Cela améliore les performances car il n'a pas besoin d'être rendu à nouveau. Il est rendu une et une seule fois
Il fonctionne avec des éléments simples, des éléments avec enfants, des composants, des directives v-for, tout ce qui se trouve dans votre template.
<template>
<!-- elements individuels (single elements) -->
<p v-once>{{ msg }}</p>
<!-- elements avec enfants (elements with children) -->
<div v-once>
<p>{{ notification}}</p>
</div>
<!-- components -->
<my-component v-once />
<!-- directive v-for -->
<li v-for="”item" in list” v-once>{{item}}</li>
</template>
Disons que nous avons ce template avec des données réactives,
<script setup><script setup> import { ref } from "vue" ; const msg = ref("hello world") ; </script> <template> <div> <p v-once>{{ msg }}</p> <button @click="msg = 'changed message'">Change message</button> <div>État actuel : <p>msg : {{ msg }}</p> </div> </div> </template>.
import { ref } from "vue";
const msg = ref("hello world");
</script>
<template>
<div>
<p v-once>{{ msg }}</p>
<button @click="msg = 'changed message'">Change message</button>
<div>
Current state:
<p>msg: {{ msg }}</p>
</div>
</div>
</template>
Lorsque nous cliquons sur notre bouton, nous pouvons voir que même si la valeur de msg change, le paragraphe ne change pas grâce à v-once.
Quand dois-je utiliser v-once ?
Vous devriez utiliser v-once s'il n'y a aucune circonstance où vous aurez besoin de rendre à nouveau un élément.
Voici quelques exemples :
- Affichage des informations sur le compte dans la barre latérale (navBar)
- Afficher le texte d'un article
- Persistance des noms de colonnes dans un tableau
Bien sûr, il y a des tonnes d'autres exemples, mais réfléchissez simplement si cela fonctionne bien dans votre application.
v-memo
La directive v-memo vous permet de “mémoïser” des parties de votre template Vue. En termes simples, la mémoïsation est une technique pour optimiser les programmes pour la performance en laissant les fonctions retourner la même valeur sans réévaluation lorsque les mêmes entrées sont données..
Elle accepte un tableau de dépendances et ne procédera à un nouveau rendu que si l'une des valeurs du tableau a changé. En gros, nous disons de ne mettre à jour cette parties de votre template que si l'une de ces valeurs change.
Dans un framework front-end réactif, il est facile d'imaginer un cas d'utilisation pour cela. Puisque Vue redéfinit automatiquement vos composants lorsque cela est nécessaire, il y a de grandes chances que parfois plus de code soit exécuté que strictement nécessaire. C'est là que v-memo entre en jeu.
<template>
<p v-memo="[msg]">{{ msg }}</p>
</template>
En continuant avec cette logique où les changements dans la valeur de nos dépendances déclencheront une mise à jour, passer dans un tableau de dépendances vide fonctionnera de la même manière que d'utiliser v-once où il ne sera jamais rendu à nouveau.
<template>
<p v-once>{{ msg }}</p>
<p v-memo="[]">{{ msg }}</p>
</template>
Considérons cet example
<script setup>
import { ref } from 'vue'
const subscribers = ref(4000)
const views = ref(10000)
const likes = ref(3000)
</script>
<template>
<div>
<div v-memo="[subscribers]">
<p>Subscribers: {{ subscribers }}</p>
<p>Views: {{ views }}</p>
<p>Likes: {{ likes }}</p>
</div>
<button @click="subscribers++">Subscribers++</button>
<button @click="views++">Views++</button>
<button @click="likes++">Likes++</button>
<div>
<p>Current state:</p>
<p>Subscribers: {{ subscribers }}</p>
<p>Views: {{ views }}</p>
<p>Likes: {{ likes }}</p>
</div>
</div>
</template>
Si nous modifions les autres éléments de données du composant, notre div ne sera pas rendu à nouveau, mais dès que nous mettons à jour la valeur des abonnés... BAM ! Voilà le rendu.
Il y a cependant un disclaimer dans la documentation de Vue .
v-memo ne fonctionne pas à l'intérieur d'une boucle v-for, donc si nous voulons mémoïser quelque chose avec un v-for, nous devons les mettre sur le même élément.
Selon les v-docs eux-mêmes, v-memo sera rarement nécessaire. Il est principalement utilisé pour des micro-optimisations dans des situations où les performances sont vitales pour votre application. Le plus souvent, v-memo est utilisé pour le rendu de listes extrêmement volumineuses dans un v-for.
Top comments (2)
Cool
Très utile et bien expliqué 😇