Vestavěné speciální atributy
key
Speciální atribut key
se používá především jako nápověda pro virtuální DOM algoritmus Vue pro identifikaci elementů (VNodes) při porovnávání nového seznamu s původním seznamem.
Očekává:
number | string | symbol
Podrobnosti
Bez
key
atributů Vue používá algoritmus, který minimalizuje pohyb elementů a snaží se co nejvíce upravit / znovupoužít elementy stejného typu na stejném místě. S použitímkey
se elementy přeuspořádávají na základě změny pořadí klíčů a elementy s klíči, které již nejsou přítomny, budou vždy odstraněny / zničeny.Potomci stejného společného rodiče musí mít unikátní klíče. Duplicitní atributy
key
způsobí chyby při vykreslování.Nejběžnější použití je v kombinaci s
v-for
:template<ul> <li v-for="item in items" :key="item.id">...</li> </ul>
Mohou být také použity k vynucenému nahrazení elementu/komponenty místo jejího znovupoužití. To může být užitečné, když chcete:
- Správně spustit lifecycle hooky komponenty
- Spustit přechody (transitions)
Například:
template<transition> <span :key="text">{{ text }}</span> </transition>
Když se změní
text
,<span>
bude vždy nahrazen místo pouhé úpravy, takže se přechod spustí.Viz také: Průvodce - Vykreslování seznamu - Udržování stavu pomocí
key
ref
Určuje Template ref.
Očekává:
string | Function
Podrobnosti
ref
se používá k zaregistrování reference na element nebo komponentu potomka.V Options API bude reference zaregistrována v objektu
this.$refs
komponenty:template<!-- uloženo jako this.$refs.p --> <p ref="p">ahoj</p>
V Composition API bude reference uložena jako
ref
se shodným názvem:vue<script setup> import { ref } from 'vue' const p = ref() </script> <template> <p ref="p">ahoj</p> </template>
Pokud je použito na obyčejném DOM elementu, reference bude odkazovat na tento element; pokud je použito na komponentě potomka, reference bude odkazovat na příslušnou instanci komponenty.
Alternativně může
ref
přijmout hodnotu funkce, která poskytuje plnou kontrolu, kam referenci uložit:template<ChildComponent :ref="(el) => child = el" />
Důležitá poznámka ohledně času registrace ref: protože samotné refs jsou vytvořeny jako výsledek vykreslovací funkce, musíte počkat, až je komponenta připojena (mounted), než k nim lze přistoupit.
this.$refs
také není reaktivní, proto byste se neměli pokoušet tento objekt použít v šablonách pro data-binding.Viz také:
is
Používá se pro binding dynamických komponent.
Očekává:
string | Komponenta
Použití na nativních elementech
- Podporováno až od verze 3.1+
Když je atribut
is
použit na nativním HTML elementu, bude interpretován jako custom vestavěný element, což je nativní funkce webové platformy.Existuje však případ použití, kdy můžete potřebovat, aby Vue nahradilo nativní element Vue komponentou, jak je vysvětleno v upozornění na omezení při parsování in-DOM šablon. Můžete atributu
is
přidat předponuvue:
, aby Vue vykreslilo element jako Vue komponentu:template<table> <tr is="vue:my-row-component"></tr> </table>
Viz také: