Dans Vue, quand ai-je besoin de l'attribut: key et pourquoi?

L'attribut clé de Vue est parfois l'un des attributs les plus mal compris et les plus négligés de l'ensemble du cadre. Dans cet article, nous allons approfondir la question: quand puis-je l'utiliser et pourquoi dois-je le faire?

Le problème

Vous vous retrouvez donc en train d'écrire une application Vue. Peut-être utilisez-vous l’étonnant Vue CLI 3 et obtenez-vous une belle configuration qui vous donne des erreurs et des conseils utiles.

Tout à coup, vous vous occupez de vos affaires, mangez votre toast à l’avocat et morning latte et les lignes sinueuses attirent votre attention. Cette dernière boucle v-for semble être erronée ?

Peut-être décidez-vous de l'ignorer et de poursuivre votre nirvana induit par l'avocat, mais cela vous frappera encore une fois temps. Erreurs de console. ? Tu paniques un peu, Vue le demande. : la clé n’a pas été définie.

Vous cédez à votre instinct et ajoutez une clé : basée sur la boucle du tableau. Vous savez que cela doit être unique. Doux soulagement, les erreurs ont disparu et vous pouvez continuer à chercher l'amélioration de l'humanité grâce à JavaScript.

Sauf que, qu'est-ce que tout cela signifie exactement?

Comprendre les bases de : clé

Comme suggéré par le document officiel utilise l'attribut spécial clé . Vue comme un indice pour qu'il comprenne ce que vous essayez exactement d'accomplir.

Mais qu'est-ce que cela signifie exactement de dire que ce n'est qu'un indice ? Vue est intelligente . Si vous n’ajoutez pas l’attribut : key à votre boucle v-for l’application ne s’effondrera pas dans une colère brûlante. En fait, il n'est même pas nécessaire de l'ajouter .

Lorsque : clé est manquant, Vue utilisera des fonctions internes ou des algorithmes pour essayer de trouver le meilleur moyen de ne pas bouger. Éléments DOM autour. Moins de mouvement signifie moins de re-rendu et de meilleures performances.

Ce processus a toutefois le défaut d'être générique et automatisé, et même s'il est GOOD dans son travail – vous, le programmeur, saura probablement mieux comment la performance et la manipulation du DOM devraient se dérouler. Cela implique que vous compreniez l'attribut pour obtenir le résultat souhaité.

Alors pourquoi obtenons-nous eslint et des avertissements sur la console? 1965

Il existe des cas particuliers où l'utilisation de clé est essentielle soit pour assurer la cohérence des données et ne pas perdre de valeur (par exemple, dans les formulaires), soit pour atteindre la constance d'objet dans animations. Plus sur ces derniers plus tard.

Ma suggestion personnelle, dans ce cas, est que vous continuiez à l'utiliser dans tous les cas. Mais avec une meilleure compréhension de ce que il va accomplir et de pourquoi vous devez l'ajouter.

Parlons des détails.

Préservation de l'état

Lorsque vous travaillez avec des éléments HTML qui ont un état dans nos boucles v-for nous devons veiller à ce que cet état ne soit pas détruit lors de la restitution du DOM.

Des éléments tels que , et ont tous un état interne qui capture la valeur de cet élément. Lorsque le DOM virtuel de Vue est modifié en raison de la modification de nos données réactives, il peut arriver que le DOM contenant nos éléments en boucle puisse être totalement ou partiellement détruit si la clé n'est pas correctement définie.

 < input   v-for  =  " entrée dans myForm "   /> 


 < input   v-pour  = [19659026] " entrée dans myForm "   : key  =  " à condition unique "   /> 

Ce problème va être résolu. conduisez à une situation TRÈS difficile à résoudre si vous ne savez pas exactement ce que vous recherchez, car il pourrait tout simplement "donner l'impression qu'il y a un problème avec la manière dont les données que vous collectez à partir du formulaire sont supprimées comme par magie.

Le même cas s’applique aux éléments en boucle qui utilisent la directive v-html . La propriété key aidera Vue à mieux reconnaître chaque élément de la liste et à ne pas détruire les éléments susceptibles de contenir des éléments contenant un état.

 < span [19659024] v-html  =  ""    v-for  =  " élément dans les éléments "   /> [19659028] < span   v-html  =  ""    v-for  =  " élément dans les éléments  "  : key  = "  unique-condition  "  /> 

Ceci s'applique bien entendu également aux composants sur mesure en boucle qui tiennent état – la même règle générale s'applique. Si la clé n'est pas définie, vous risquez que des données et des états soient détruits en raison d'une refonte du DOM.

Enfin, gardez un œil sur v-for effectue une boucle sur un élément contenant un élément stateAIN. Le même problème peut évidemment se produire.

 < div   v-for  =  " élément dans les éléments "  > 
     <  input > 
 </  div > 


 < div   v-for  =  "élément dans les éléments  "  : clé  = "  unique-condition  " > 
     < entrée > 
 ] </  div > 

Constance d'objet

Les animations ne sont pas seulement un joli moyen de déplacer des données – elles transmettent des informations importantes à nos utilisateurs sur l'évolution de l'information qu'ils consultent . Lorsqu'un objet se déplace autour de l'écran, qu'il glisse ou qu'il s'efface, nous nous attendons à ce qu'il soit cohérent et facile à suivre puisqu'il transmet les informations qu'il tente de nous montrer.

Attendez, quoi?

Imaginez un menu mobile en train de glisser à partir de la gauche après avoir touché une icône de hamburger have (have nous avons des menus hamburguer et kebab, faisons en sorte que le menu se déroule en équipe!).

Il effectue une transition en douceur vers la moitié de l'écran et affiche clairement les options vous, l'utilisateur, avez pour naviguer sur la page Web. Cependant, lorsque vous appuyez sur l'un des éléments de menu, le menu s'aligne comme par magie sur le côté droit de l'écran et disparaît sur la droite du téléphone.

Confus, vous appuyez sur l'icône du hamburger et le menu réapparaît à partir de la gauche. côté de l'écran une fois de plus. ?‍

C'est un excellent exemple d'un manque de constance des objets. Nous nous attendons à ce que l'objet virtuel du menu soit «masqué» du même côté de notre téléphone et qu'il «glisse» dans la fenêtre d'affichage lorsque nous appuyons sur le bouton. Lorsque cette animation n'est pas cohérente ou claire, elle crée une mauvaise expérience utilisateur et pose également des problèmes de suivi des informations.

Ceci est un exemple TRÈS simple, mais que se passe-t-il lorsque nous allons plus loin et avons une liste d'éléments tentent de transmettre, par exemple, des données cartographiques ou une liste de tâches. Lorsqu'un de ces éléments glisse vers la gauche ou disparaît, nous nous attendons à ce que cet élément disparaisse. Si pour une raison inconnue de l'utilisateur, l'objet disparaissait comme par magie, puis qu'un autre objet glissait vers la gauche, cela créerait la confusion et l'animation – plutôt que de servir de repère visuel – créerait un malaise et une confusion.

Exemple -World

Les conversations ne coûtent pas cher. Montre moi le code. – Linus Torvalds

J'ai créé un exemple simplifié de la dernière interaction utilisateur que j'ai décrite afin que vous puissiez le voir en action.

https://codesandbox.io/s/jjlwv87w1v

Ouvrez le bac à sable et examinez le fichier App.vue .

Nous avons deux listes d'éléments alimentés par le même pool de données, une propriété appelée list . ].

En haut de la liste, nous créons une boucle v-for qui utilise la propriété unique id comme moyen de suivre le caractère unique de chacun des éléments. list items – comme suggéré habituellement par le compilateur, et pour augmenter les performances du DOM.

Sur la liste du bas, nous utilisons un « hack », pour utiliser l'index du tableau comme moyen de boucler nos envois et de satisfaire l’avertissement : key .

Je ne vais pas aborder en profondeur les implications de l’utilisation de l’indice comme clé, par exemple. il peut parfois être la bonne réponse si vous savez exactement ce que vous faites en matière de gestion des index. Mais concentrons-nous plutôt sur ses implications pour UX.

Les deux listes sont encapsulées dans un composant qui nous permettra d’identifier visuellement ce qui se passe. Allez-y et jouez avec la liste du haut, cliquez autour de quelques objets, puis cliquez sur le bouton reset . Lisse, non? L'objet sur lequel vous cliquez est celui qui glisse. Mission accomplie.

Allez-y et cliquez maintenant sur la deuxième liste. Je ne sais pas pour vous, mais pour moi, cela semble déréglé.

Chris Fritz a un exemple étonnant de la façon dont des animations fluides peuvent vous donner une expérience utilisateur intuitive. Assurez-vous de vérifier dans ce violon . Essayez aussi de jouer avec la : touche . Si vous cassez le système, les chiffres cesseront simplement de s'animer.

Gardez à l'esprit pour ce dernier exemple que lève un avertissement si vous supprimez la clé et le rendu sera complètement interrompu.

Essayez d’ajouter un index à la boucle v-for et de le définir comme valeur pour la clé : comme le font certaines personnes pour «satisfaire» la condition et supprimer le warning.

Briser les choses

Que se passe-t-il exactement ici qui casse notre constance d'objet dans le deuxième exemple? ?

Lorsque nous cliquons sur l'un des éléments pour déclencher la méthode removeFromList Vue effectue plusieurs opérations en arrière-plan. Tout d'abord, la méthode met à jour le tableau contenant notre liste en appelant la méthode splice sur l'élément de . [19659004] Une fois la liste ? mise à jour, Vue doit toutefois reconfigurer le DOM afin de réagir aux modifications apportées à l'état. C'est le cœur de la réactivité de Vue.

Habituellement, Vue saurait que pour une boucle v-for il doit déterminer quel élément il doit mettre à jour via la clé . . C'est ce que tu sais déjà. Cependant, à cause de Vue conserve une copie partielle de l'état pour exécuter les animations tandis que les éléments sont supprimés de l'écran, même si cet élément n'existe plus sur le composant . ] état .

Lorsque nous utilisons : clé avec l'identifiant de l'objet sur le premier exemple, Vue a une référence exacte à ce que nous essayons d'accomplir, car ceci Le point particulier a un moyen unique de s'identifier. Donc, quand Vue doit le supprimer, à la fois de l'état et de l'animation, il peut dire exactement avec lequel il doit travailler.

Lorsque nous utilisons : clé avec l'index, cependant, nous rencontrer un problème. Rappelez-vous le pas à pas que nous venons de traverser? Essayons cela à nouveau, mais examinons de plus près ce que fait l'index.

1. Nous cliquons sur un élément – prenons id 2 comme exemple.
2. Le removeFromList [Laméthode indique que l'index de cet élément est en fait 1 et le supprime rapidement du tableau.
3. Vue sait qu'elle doit procéder à un nouveau rendu dans le DOM car la liste est modifiée ] a été mis à jour et fait de son mieux pour déterminer les éléments à redessiner à l'écran. Donc, cela commence par index 1 (cycle du tableau). On dirait que cela n’a pas changé. Il continue ensuite à l'index 1 et remarque que le contenu est différent (ce qui était dans l'index 2 à présent est dans l'index 1, car l'épissure l'a déplacé d'un espace vers le bas). Vient ensuite l’indexation 2 et le même problème se pose, et ainsi de suite. Vue reprend effectivement la totalité de la liste.
4. D'autre part, fait de son mieux pour rattraper le changement de DOM et la modification de l'état “ copie ”l’élément supprimé à la fin de la liste et l’anime en quittant l’écran. Il n'a pas moyen de savoir comment réorganiser son état interne pour tenir compte des modifications d'indice de l'état.

Wraping Up

L'attribut clé a beaucoup plus sous le capot qu'il n'y parait. Maintenant que vous comprenez exactement ce que vous tentez d'accomplir et les raisons de la «magie», vous pouvez passer de meilleurs appels lors du développement de vos boucles et obtenir un contrôle plus granulaire de votre application et de ses performances. ?

Ce blog a été conçu pour vous par Kendo UI

Vous voulez en savoir plus sur la création de superbes applications Web? Tout commence avec Kendo UI – la bibliothèque complète de composants d'interface utilisateur qui vous permet de créer rapidement des applications réactives de haute qualité. Il comprend tout ce dont vous avez besoin, des grilles et graphiques aux menus déroulants et jauges.