Atributos Especiais Embutidos ​

key ​

O atributo especial key é primariamente usado como uma sugestão para o algoritmo do DOM virtual da Vue identificar os nós virtuais quando diferenciar a nova lista de nós contra a antiga lista.

• Espera: number | string | symbol

• Detalhes

  Sem chaves, a Vue usa um algoritmo que minimiza o movimento de elemento e tenta remendar ou reusar elementos do mesmo tipo no lugar o máximo possível. Com chaves, reorganizará os elementos baseado na mudança de ordem das chaves, e os elementos com chaves que não estão mais presentes sempre serão removidos ou destruídos.

  Os filhos do mesmo pai comum devem ter chaves únicas. As chaves duplicadas causarão erros de interpretação.

  O caso de uso mais comum é combinado com v-for:

  template

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

  Também pode ser usado para forçar a substituição dum elemento ou componente ao invés de reusá-lo. Isto pode ser útil quando queremos:

  • Acionar corretamente os gatilhos do ciclo de vida dum componente
  • Acionar transições

  Por exemplo:

  template

  <transition>
    <span :key="text">{{ text }}</span>
  </transition>

  Quando text mudar, o <span> sempre será substituído ao invés de ser remendado, depois uma transição será acionada.

• Consulte também Guia - Interpretação de Lista - Mantendo o Estado com key

ref ​

Denota uma referência do modelo de marcação.

• Espera: string | Function

• Detalhes

  ref é usado para registar uma referência à um elemento ou à um componente filho.

  Na API de Opções, a referência será registada sob o objeto this.$refs do componente:

  template

  <!-- armazenado como this.$refs.p -->
  <p ref="p">hello</p>

  Na API de Composição, a referência será armazenada em uma ref com o nome correspondente:

  vue

  <script setup>
  import { ref } from 'vue'
  
  const p = ref()
  </script>
  
  <template>
    <p ref="p">hello</p>
  </template>

  Se usado sobre um elemento de DOM simples, a referência será este elemento; se usada sobre um componente filho, a referência será a instância do componente filho.

  Alternativamente, a ref pode aceitar um valor de função que fornece controlo total sobre onde armazenar a referência:

  template

  <ChildComponent :ref="(el) => child = el" />

  Uma nota importante sobre o tempo de registo da referência: uma vez que as próprias referências são criadas como resultado da função de interpretação, devemos esperar até o componente ser montado antes de acessá-las.

  this.$refs também não é reativa, portanto não devemos tentar usá-la nos modelos de marcação para vínculo de dados.

• Consulte também

  • Guia - Referências do Modelo de Marcação
  • Guia - Tipos para Referências do Modelo de Marcação
  • Guia - Tipos para Referências do Modelo de Marcação do Componente

is ​

Usado para vincular os componentes dinâmicos.

• Espera: string | Component

• Uso sobre os elementos nativos ^3.1+

  Quando o atributo is for usado sobre um elemento de HTML nativo, será interpretado como um elemento embutido personalizado, que é uma funcionalidade da plataforma da Web nativa.

  Existe, no entanto, um caso de uso onde podemos precisar que a Vue substitua um elemento nativo por um elemento da Vue, como explicado nas Advertências de Analise do Modelo de Marcação de DOM. Nós podemos prefixar o valor do atributo is com vue: assim a Vue interpretará o elemento como um componente de Vue:

  template

  <table>
    <tr is="vue:my-row-component"></tr>
  </table>

• Consulte também

  • Elementos Especiais Embutidos - <component>
  • Componentes Dinâmicos