Built-in Special Attributes

key

Specjalny atrybut key jest używany przede wszystkim jako wskazówka dla algorytmu wirtualnego DOM języka Vue w celu zidentyfikowania vnode'ów podczas porównywania nowej listy węzłów ze starą listą.

Oczekuje: number | string | symbol
Szczegóły
Bez kluczy Vue używa algorytmu, który minimalizuje ruch elementów i próbuje łatać/ponownie używać elementów tego samego typu na miejscu, tak bardzo jak to możliwe. Z kluczami zmieni kolejność elementów na podstawie zmiany kolejności kluczy, a elementy z kluczami, których już nie ma, będą zawsze usuwane/niszczone.
Dzieci tego samego wspólnego rodzica muszą mieć unikalne klucze. Duplikaty kluczy spowodują błędy renderowania.
Najczęstszym przypadkiem użycia jest połączenie z v-for:
template
```
<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>
```
Można go również użyć do wymuszenia zastąpienia elementu/komponentu zamiast ponownego użycia. Może to być przydatne, gdy chcesz:
- Prawidłowo wyzwalaj haki cyklu życia komponentu
- Wyzwalaj przejścia
Na przykład:
template
```
<transition>
  <span :key="text">{{ text }}</span>
</transition>
```
Gdy text ulega zmianie, <span> zawsze zostanie zastąpiony zamiast załatany, więc nastąpi przejście.
Zobacz również Guide - List Rendering - Maintaining State with key

ref

Oznacza template ref.

Oczekuje: string | Function
Szczegóły
ref służy do rejestrowania odniesienia do elementu lub komponentu podrzędnego.
W API opcji, odniesienie zostanie zarejestrowane w obiekcie this.$refs komponentu:
template
```

<p ref="p">hello</p>
```
W interfejsie API kompozycji odniesienie zostanie zapisane w odniesieniu o pasującej nazwie:
vue
```
<script setup>
import { useTemplateRef } from 'vue'

const pRef = useTemplateRef('p')
</script>

<template>
  <p ref="p">hello</p>
</template>
```
Jeśli zostanie użyte na zwykłym elemencie DOM, odniesienie będzie tym elementem; jeśli zostanie użyte na komponencie potomnym, odniesienie będzie instancją komponentu potomnego.
Alternatywnie ref może przyjąć wartość funkcji, która zapewnia pełną kontrolę nad tym, gdzie przechowywać odniesienie:
template
```
<ChildComponent :ref="(el) => child = el" />
```
Ważna uwaga dotycząca czasu rejestracji ref: ponieważ same ref są tworzone w wyniku funkcji renderowania, musisz poczekać, aż komponent zostanie zamontowany, zanim uzyskasz do nich dostęp.
this.$refs jest również niereaktywny, dlatego nie powinieneś próbować używać go w szablonach do wiązania danych.
Zobacz również

is

Stosowany do wiązania dynamic components.

Oczekuje: string | Component
Użycie na elementach natywnych ^3.1+
- Wspierane tylko w 3.1+
Gdy atrybut is jest używany w natywnym elemencie HTML, zostanie zinterpretowany jako Dostosowany wbudowany element, który jest natywną funkcją platformy internetowej.
Istnieje jednak przypadek użycia, w którym możesz potrzebować Vue, aby zastąpić natywny element komponentem Vue, jak wyjaśniono w In-DOM Template Parsing Caveats. Możesz dodać prefiks is do wartości atrybutu vue:, aby Vue renderował element jako komponent Vue:
template
```
<table>
  <tr is="vue:my-row-component"></tr>
</table>
```
Zobacz również
- Built-in Special Element - <component>
- Dynamic Components

Edytuj tę stronę na GitHub

Built-in Special Attributes ​

key ​

ref ​

is ​

Built-in Special Attributes

key

ref

is