javascript - vue 2.0 : rôle de la clé

Question

<p v-for="élément dans les éléments" :key="item.id">
<!-- Contenu -->
</p>

Comment utiliser cette :key ? Pouvez-vous donner un exemple ? Est-elle simplement ajoutée pour v-for ? :key="value" La valeur est-elle écrite arbitrairement ?

Answer 1

Les attributs spéciaux de

key sont principalement utilisés dans l'algorithme DOM virtuel de Vue pour identifier les VNodes lors de la comparaison des anciens et des nouveaux nœuds. Si les clés ne sont pas utilisées, Vue utilise un algorithme qui minimise les éléments dynamiques et essaie de réparer/réutiliser les éléments du même type autant que possible. En utilisant key, il réorganisera l'ordre des éléments en fonction des changements de clé et supprimera les éléments là où la clé n'existe pas.

Les éléments enfants avec le même élément parent doivent avoir des clés uniques. Les clés en double entraîneront des erreurs de rendu.

Le cas d'utilisation le plus courant est en combinaison avec v-for :

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

Il peut également être utilisé pour forcer le remplacement d'un élément/composant au lieu de le réutiliser. Cela peut être utile lorsque vous rencontrez les scénarios suivants :

Déclencher complètement le hook du cycle de vie du composant
Déclencher la transition

<transition>
  <span :key="text">{{ text }}</span>
</transition>

Lorsque le texte change, <span> sera mis à jour à tout moment, déclenchant ainsi la transition.

Référence source : https://cn.vuejs.org/v2/api/#key

Answer 2

Parfois lors du rendu d'une liste, il est nécessaire de s'assurer de l'unicité des données. Cette clé est un identifiant unique et doit être unique

.

Answer 3

La clé est-elle là lors de la mise à jour des données de la liste ? Le premier point : si les données sont mises à jour avec les mêmes données, la clé sera utilisée pour le rendu directement. S'il n'y a pas les mêmes données, la clé sera comparée. ne sont pas les mêmes, ces nouvelles données doivent être restituées, sinon Vue utilisera directement les données existantes pour le rendu en utilisant le principe sur place. En conséquence, les données n'obtiendront pas l'effet escompté, mais l'original. Les styles et composants dom ne peuvent pas être mis à jour ? Je ne sais pas si ma compréhension est correcte, mais le site officiel dit que l'entrée doit avoir une clé, mais j'ai trouvé que l'effet est le même, qu'il y ait une clé ou non. Je me demande si quelqu'un peut me donner un exemple. Je serais très reconnaissant! ! ! ! ! ! ! ! ! ! ! !

Answer 4

Ce que j'ai dit ci-dessus est trop officiel. En langue vernaculaire, c'est plus facile pour vous de comprendre, c'est-à-dire d'améliorer les performances du cycle

En fait, peu importe que vous écriviez cette chose ou non, même si vous faites une erreur, cela ne signalera pas d'erreur. Mais il est généralement préférable d'écrire une boucle for

.

Answer 5

Il est recommandé de lire plus de documents :
http://cn.vuejs.org/v2/guide/...