Atributo key de Vue3

Vue3 内置属性Atributos integrados de Vue3

keyEl atributo key es un atributo especial clave en el algoritmo del DOM virtual de Vue, utilizado principalmente para ayudar a Vue a identificar la unicidad de cada nodo y así actualizar el DOM virtual de manera eficiente.

Descripción básica

keyEl atributo key se utiliza para proporcionar una identificación única a los componentes o elementos de Vue. En el renderizado de listas, cadav-forelemento del bucle debe tener unkeyatributo único.

  • Tipo: String | Number
  • Función: proporciona una identificación única para cada elemento en el renderizado de listas, ayudando a Vue a hacer diff y reutilizar nodos DOM de manera eficiente.

Principio de funcionamiento

Cuando Vue realiza el diff del DOM virtual, si no haykeykey, Vue adopta un algoritmo que minimiza el movimiento de elementos, reutilizando en el lugar elementos del mismo tipo siempre que sea posible. Conkeykey, Vue reordena los elementos según los cambios de orden de las key y elimina aquellos cuyas key ya no existen.

Los elementos hijos del mismo elemento padre deben tener key únicas. Las key duplicadas pueden causar errores de renderizado.

Uso básico

El uso más común es combinarlo conv-forv-for:

Ejemplo

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

Casos de uso

1. Renderizado de listas

Env-forEl uso de key enkeyel renderizado de listas es el caso más común:

Ejemplo

<template>
  <div>
    <div v-for="user in users" :key="user.id" :style="{ marginBottom: '10px' }">
      <span>{{ user.id }}</span> -
      <span>{{ user.name }}</span> -
      <span>{{ user.email }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
{ id: 1, name: 'Zhang San', email: '[email protected]' },
{ id: 2, name: 'Li Si', email: '[email protected]' },
{ id: 3, name: 'Wang Wu', email: '[email protected]' }
      ]
    }
  }
}
</script>

2. Forzar el reemplazo de elementos

keyTambién se puede utilizar para forzar el reemplazo de un elemento o componente, en lugar de reutilizarlo. Esto es útil en los siguientes escenarios:

  • Activar correctamente los hooks del ciclo de vida del componente
  • Activar animaciones de transición

Ejemplo

<template>
  <div>
    <input v-model="text" placeholder="Contenido de entrada" />
    <transition>
      <span :key="text">{{ text }}</span>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: ''
    }
  }
}
</script>

Cuandotextcuando cambia,<span>el elemento se reemplaza en lugar de reutilizarse, por lo que se activa el efecto de transición.

Notas

La key debe ser única y estable: el valor de la key no debe cambiar con los cambios de los datos; de lo contrario, afectará el rendimiento de Vue y la estrategia de reutilización del DOM virtual.

Evita usar el índice como key: a menos que sepas claramente que el orden de los elementos de la lista no cambiará. Como el índice se basa en la posición, cuando el orden de la lista cambia, la key también cambia, lo que provoca que Vue no pueda reutilizar correctamente los nodos DOM.

Ejemplo

<!-- No recomendado: usar el índice como key (cuando el orden de la lista pueda cambiar) -->
<li v-for="(item, index) in items" :key="index">{{ item.name }}</li>

<!-- Recomendado: usar un ID único como key -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>

Uso con v-for

keyyv-forAl usarlo con v-for, existen las siguientes sintaxis:

Ejemplo

<!-- Recorrido de array -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>

<!-- Recorrido con índice -->
<li v-for="(item, index) in items" :key="index">{{ index }} - {{ item.name }}</li>

<!-- Recorrido de objeto -->
<li v-for="(value, key, index) in object" :key="key">
  {{ index }}. {{ key }}: {{ value }}
</li>

<!-- Recorrido de números -->
<span v-for="n in 5" :key="n">{{ n }}</span>

Vue3 内置属性Atributos integrados de Vue3

Otras extensiones