Atributos Especiales Integrados ​

key ​

El atributo especial key se utiliza principalmente como una pista para el algoritmo del DOM virtual de Vue para identificar los vnodes al diferenciar la nueva lista de nodos de la lista antigua.

• Espera: number | string | symbol

• Detalles

  Sin claves, Vue utiliza un algoritmo que minimiza el movimiento de elementos y trata de parchear/reutilizar elementos del mismo tipo en su lugar tanto como sea posible. Con claves, reordenará los elementos basándose en el cambio de orden de las claves, y los elementos con claves que ya no estén presentes siempre serán eliminados / destruidos.

  Los hijos de un mismo padre común deben tener claves únicas. Las claves duplicadas causarán errores de renderizado.

  El caso de uso más común se combina con v-for:

  template

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

  También se puede utilizar para forzar el reemplazo de un elemento/componente en lugar de reutilizarlo. Esto puede ser útil cuando deseas:

  • Activar correctamente los hooks del ciclo de vida de un componente
  • Activar transiciones

  Por ejemplo:

  template

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

  Cuando text cambia, el <span> siempre será reemplazado en lugar de parcheado, por lo que se activará una transición.

• Ver también Guía - Renderizado de Listas - Mantener el estado con key

ref ​

Denota una Template Refs.

• Espera: string | Function

• Detalles

  ref se utiliza para registrar una referencia a un elemento o a un componente hijo.

  En la Options API, la referencia se registrará bajo el objeto this.$refs del componente:

  template

  <!-- stored as this.$refs.p -->
  <p ref="p">hello</p>

  En la Composition API, la referencia se almacenará en un ref con un nombre coincidente:

  vue

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

  Si se utiliza en un elemento DOM simple, la referencia será ese elemento; si se utiliza en un componente hijo, la referencia será la instancia del componente hijo.

  Alternativamente, ref puede aceptar un valor de función que proporciona control total sobre dónde almacenar la referencia:

  template

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

  Una nota importante sobre el momento del registro de ref: debido a que las propias referencias se crean como resultado de la función de renderizado, debes esperar hasta que el componente esté montado antes de acceder a ellas.

  this.$refs tampoco es reactivo, por lo tanto, no debes intentar usarlo en templates para el enlace de datos.

• Ver también

  • Guía - Template Refs
  • Guía - Tipado de Template Refs
  • Guía - Tipado de Template Refs de Componentes

is ​

Se utiliza para enlazar componentes dinámicos.

• Espera: string | Component

• Uso en elementos nativos

  • Solo compatible en 3.1+

  Cuando el atributo is se utiliza en un elemento HTML nativo, se interpretará como un elemento integrado personalizado, que es una característica nativa de la plataforma web.

  Existe, sin embargo, un caso de uso en el que es posible que necesites que Vue reemplace un elemento nativo con un componente de Vue, como se explica en Consideraciones sobre el análisis de templates en el DOM. Puedes prefijar el valor del atributo is con vue: para que Vue renderice el elemento como un componente de Vue en su lugar:

  template

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

• Ver también

  • Elemento Especial Integrado - <component>
  • Componentes Dinámicos