Vue.js

# Atributos Especiales

# key

  • Espera: number | string | symbol

    El atributo especial key es utilizado principalmente como una pista para el algoritmo del DOM virtual de Vue para identificar VNodes cuando se compara nuevas listas de nodos contra listas antiguas. Sin claves, Vue utiliza un algoritmo que minimiza el movimiento de elementos e intenta parchar/reutilizar elementos del mismo tipo in situ lo más posible. Con claves, este reordenará elementos basado en el orden de cambio de las claves, y los elementos con claves que ya no estén presentes, siempre serán removidos/destruidos.

    Hijos de un mismo padre en común siempre deben tener claves únicas. Claves duplicadas causarán errores de renderización.

    El caso de uso más común es combinado con v-for:

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

    También puede ser utilizado para forzar el reemplazo de un elemento/componente en vez de reutilizar el mismo. Esto puede ser útil cuando usted desee:

    • Lanzar apropiadamente hooks de ciclo de vida de un componente
    • Lanzar transiciones

    Por ejemplo:

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

    Cuando text cambie, el <span> siempre será reemplazado en vez de parchado, por lo cual, una transición será lanzada.

# ref

  • Espera: string | Function

    ref es utilizado para registrar una referencia a un elemento o a un componente hijo. La referencia será registrada bajo el objeto $refs del componente padre. Si se utiliza en un elemento DOM plano, la referencia será a dicho elemento; si se utiliza en un componente hijo, la referencia será a la instancia de dicha componente:

    <!-- vm.$refs.p será el nodo DOM -->
<p ref="p">hello</p>

<!-- vm.$refs.child será la intancia del componente hijo -->
<child-component ref="child"></child-component>

<!-- Cuando se vincule dinámicamente, podemos definir ref como una función callback, pasando el elemento o la instancia de componente explícitamente -->
<child-component :ref="(el) => child = el"></child-component>
    1
    2
    3
    4
    5
    6
    7
    8

    Una nota importante sobre el tiempo de registro de ref: dado que las refs mismas son creadas como resultado de la función de renderización, usted no puede acceder a las mismas en la renderización inicial - estas no existen todavía! También, refs no es reactivo, por lo tanto, no intente utilizarlo en plantillas para vinculaciones de datos (data-binding).

  • Vea también: Referencias a Componentes Hijos

# is

← Componentes Integrados →