Attributs spéciaux natifs

key

L'attribut spécial key est principalement utilisé comme une indication aidant l'algorithme du DOM virtuel de Vue à identifier les VNodes lors de la comparaison de la nouvelle et de l'ancienne liste de nœuds.

Attendu : number | string | symbol
Détails
Sans clés, Vue utilise un algorithme qui minimise le mouvement des éléments et essaie de remplacer/réutiliser les éléments du même type déjà en place autant que possible. Avec des clés, il réorganisera les éléments en fonction du changement d'ordre des clés, et les éléments dont les clés ne sont plus présentes seront toujours supprimés / détruits.
Les clés des enfants d'un même parent doivent être uniques. Les clés dupliquées entraîneront des erreurs de rendu.
Le cas d'utilisation le plus courant est en combinaison avec v-for :
template
```
<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>
```
Elle peut également être utilisée pour forcer le remplacement d'un élément/composant au lieu de le réutiliser. Cela peut être utile lorsque vous voulez :
- Déclencher correctement les hooks de cycle de vie d'un composant
- Déclencher des transitions
Par exemple :
template
```
<transition>
  <span :key="text">{{ text }}</span>
</transition>
```
Quand text change, le <span> sera toujours remplacé au lieu d'être corrigé, donc une transition sera déclenchée.
Voir aussi Guide - Rendu de liste - Maintenir l'état avec key

ref

Désigne une ref du template.

Attendu : string | Function
Détails
ref est utilisée pour enregistrer une référence à un élément ou à un composant enfant.
Dans l'Options API, la référence sera enregistrée sous l'objet this.$refs du composant :
template
```

<p ref="p">hello</p>
```
Dans la Composition API, la référence sera stockée dans une ref avec le nom correspondant :
vue
```
<script setup>
import { ref } from 'vue'

const p = ref()
</script>

<template>
  <p ref="p">hello</p>
</template>
```
Si elle est utilisée sur un élément simple du DOM, la référence sera cet élément ; si elle est utilisée sur un composant enfant, la référence sera l'instance du composant enfant.
De manière alternative, ref peut accepter une valeur de fonction qui fournit un contrôle total sur l'endroit où la référence sera stockée :
template
```
<ChildComponent :ref="(el) => child = el" />
```
Une remarque importante concernant le timing de l'enregistrement des refs : comme les refs elles-mêmes sont créées à la suite de la fonction de rendu, vous devez attendre que le composant soit monté avant d'y accéder.
this.$refs est également non réactive, vous ne devez donc pas l'utiliser dans les templates pour la liaison de données.
Voir aussi

is

Utilisé pour lier les composants dynamiques.

Attendu : string | Component
Utilisation sur des éléments natifs
- Supporté à partir de la version 3.1
Lorsque l'attribut "is" est utilisé sur un élément HTML natif, il sera interprété comme un élément natif personnalisé, qui est une fonctionnalité native de la plate-forme Web.
Il existe cependant un cas d'utilisation où vous pouvez avoir besoin que Vue remplace un élément natif par un composant Vue, comme expliqué dans Mises en garde concernant l'analyse du template DOM. Vous pouvez préfixer la valeur de l'attribut is avec vue: pour que Vue rende l'élément comme un composant Vue :
template
```
<table>
  <tr is="vue:my-row-component"></tr>
</table>
```
Voir aussi
- Éléments spéciaux natifs - <component>
- Composants dynamiques

Éditer cette page sur GitHub

Attributs spéciaux natifs ​

key ​

ref ​

is ​

Attributs spéciaux natifs

key

ref

is