Attribut key de Vue3

Vue3 内置属性Attributs intégrés de Vue3

keyL'attribut est un attribut spécial crucial de l'algorithme de DOM virtuel de Vue, principalement utilisé pour aider Vue à identifier l'unicité de chaque nœud, ce qui permet de mettre à jour efficacement le DOM virtuel.

Description de base

keyL'attribut est utilisé pour fournir un identifiant unique aux composants ou éléments Vue. Dans le rendu de liste, chaquev-forélément dans la boucle doit avoir un identifiant uniquekeyattribut.

  • Type: String | Number
  • Objectif: Fournit un identifiant unique pour chaque élément lors du rendu de liste, aidant Vue à comparer efficacement et à réutiliser les nœuds DOM.

Comment ça marche

Lorsque Vue effectue un diff du DOM virtuel, lorsqu'il n'y a pas dekeykey, Vue utilise un algorithme qui minimise les déplacements d'éléments, en réutilisant autant que possible les éléments de même type sur place. Lorsqu'il y akeykey, Vue réorganise les éléments en fonction des changements d'ordre des key et supprime les éléments dont la key n'existe plus.

Les enfants d'un même élément parent doivent avoir des key uniques. Des key en double provoqueront des erreurs de rendu.

Utilisation de base

L'utilisation la plus courante se fait en combinaisonv-foravec v-for :

Exemple

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

Cas d'utilisation

1. Rendu de liste

Dansv-forL'utilisation de keykeyest le scénario le plus courant :

Exemple

<template>
  <div>
    <div v-for="user in users" :key="user.id" :style="{ marginBottom: '10px' }">
      <span>{{ user.id }}</span> -
      <span>{{ user.name }}</span> -
      <span>{{ user.email }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
{ id: 1, name: 'Zhang San', email: '[email protected]' },
{ id: 2, name: 'Li Si', email: '[email protected]' },
{ id: 3, name: 'Wang Wu', email: '[email protected]' }
      ]
    }
  }
}
</script>

2. Forcer le remplacement des éléments

keyCela peut également être utilisé pour forcer le remplacement d'éléments ou de composants au lieu de les réutiliser. Cela est utile dans les scénarios suivants :

  • Déclencher correctement les hooks du cycle de vie des composants
  • Déclencher des animations de transition

Exemple

<template>
  <div>
    <input v-model="text" placeholder=Lorsque le contenu de l'entrée />
    <transition>
      <span :key="text">{{ text }}</span>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: ''
    }
  }
}
</script>

Quandtextmodifications,<span>l'élément est remplacé au lieu d'être réutilisé, ce qui déclenche l'effet de transition.

Notes

key doit être unique et stable: la valeur de key ne doit pas changer lorsque les données changent, sinon cela affectera les performances de Vue et la stratégie de réutilisation du DOM virtuel.

Évitez d'utiliser l'index comme clé: sauf si vous savez explicitement que l'ordre des éléments de la liste ne changera pas. Parce que l'index est basé sur la position, lorsque l'ordre de la liste change, la clé change aussi, ce qui empêche Vue de réutiliser correctement les nœuds DOM.

Exemple

<!-- Non recommandé : utiliser l'index comme clé (lorsque l'ordre de la liste change) -->
<li v-for="(item, index) in items" :key="index">{{ item.name }}</li>

<!-- Recommandé : utiliser un ID unique comme clé -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>

Utilisation avec v-for

keyetv-forLorsqu'ils sont utilisés ensemble, il existe plusieurs syntaxes :

Exemple

<!-- Itération de tableau -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>

<!-- Itération avec index -->
<li v-for="(item, index) in items" :key="index">{{ index }} - {{ item.name }}</li>

<!-- Itération d'objet -->
<li v-for="(value, key, index) in object" :key="key">
  {{ index }}. {{ key }}: {{ value }}
</li>

<!-- Itération sur les nombres -->
<span v-for="n in 5" :key="n">{{ n }}</span>

Vue3 内置属性Attributs intégrés de Vue3

Autres extensions