Skip to content

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ím key 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.

Vestavěné speciální atributy has loaded