Vue.js

Apparence

Sur cette page

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
    <!-- stockée sous this.$refs.p -->
<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.

Éditer cette page sur GitHub