Vue3 key-Attribut

Vue3 内置属性Vue3 integrierte Attribute

keyDas Attribut ist ein kritisches spezielles Attribut des Algorithmus des virtuellen DOM von Vue und wird hauptsächlich verwendet, um Vue dabei zu helfen, die Eindeutigkeit jedes Knotens zu identifizieren und dadurch das virtuelle DOM effizient zu aktualisieren.

Grundlegende Beschreibung

keyDas Attribut wird verwendet, um eine eindeutige Kennung für Vue-Komponenten oder -Elemente bereitzustellen. Beim Rendern von Listen sollte jedesv-forElement in der Schleife eine eindeutigekeyAttributs.

  • Typ: String | Number
  • Zweck: Bietet eine eindeutige Kennung für jedes Element beim Rendern von Listen und hilft Vue, DOM-Knoten effizient zu vergleichen und wiederzuverwenden.

Funktionsweise

Wenn Vue virtuelles DOM-Diffing durchführt, wenn keinkeykey, verwendet Vue einen Algorithmus, der Elementbewegungen minimiert und Elemente desselben Typs so weit wie möglich an Ort und Stelle wiederverwendet. Wenn einkeykey vorhanden ist, ordnet Vue Elemente entsprechend Änderungen der key-Reihenfolge neu an und entfernt Elemente, deren key nicht mehr existiert.

Kinder desselben übergeordneten Elements müssen eindeutige keys haben. Doppelte keys verursachen Renderingfehler.

Grundlegende Verwendung

Die häufigste Verwendung ist in Kombinationv-formit v-for:

Beispiel

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

Anwendungsfälle

1. Listenrendering

Inv-forunter Verwendung von keykeyist das häufigste Szenario:

Beispiel

<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. Erzwingen des Elementaustauschs

keyEs kann auch verwendet werden, um den Austausch von Elementen oder Komponenten zu erzwingen, anstatt sie wiederzuverwenden. Dies ist in den folgenden Szenarien nützlich:

  • Korrektes Auslösen von Komponenten-Lebenszyklus-Hooks
  • Auslösen von Übergangsanimationen

Beispiel

<template>
  <div>
    <input v-model="text" placeholder=Wenn der Eingabeinhalt />
    <transition>
      <span :key="text">{{ text }}</span>
    </transition>
  </div>
</template>

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

WanntextÄnderungen,<span>Das Element wird ersetzt statt wiederverwendet, wodurch der Übergangseffekt ausgelöst wird.

Hinweise

key sollte eindeutig und stabil sein: Der Wert von key sollte sich nicht ändern, wenn sich die Daten ändern, andernfalls beeinträchtigt dies die Leistung von Vue und die Wiederverwendungsstrategie des virtuellen DOM.

Vermeide die Verwendung des Index als Key: es sei denn, du weißt explizit, dass sich die Reihenfolge der Listenelemente nicht ändert. Da der Index auf der Position basiert, ändert sich beim Ändern der Listenreihenfolge auch der Key, wodurch Vue DOM-Knoten nicht korrekt wiederverwenden kann.

Beispiel

<!-- Nicht empfohlen: Verwendung des Index als Key (wenn sich die Listenreihenfolge ändert) -->
<li v-for="(item, index) in items" :key="index">{{ item.name }}</li>

<!-- Empfohlen: eindeutige ID als Key verwenden -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>

Verwendung mit v-for

keyundv-forBei gemeinsamer Verwendung gibt es mehrere Syntaxvarianten:

Beispiel

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

<!-- Iteration mit Index -->
<li v-for="(item, index) in items" :key="index">{{ index }} - {{ item.name }}</li>

<!-- Objekt-Iteration -->
<li v-for="(value, key, index) in object" :key="key">
  {{ index }}. {{ key }}: {{ value }}
</li>

<!-- Zahleniteration -->
<span v-for="n in 5" :key="n">{{ n }}</span>

Vue3 内置属性Vue3 integrierte Attribute

Andere Erweiterungen