En el primer caso, el v-for itera sobre todos los elementos de items . Asigna la :key al elemento en sí. Esto no es ideal si tiene elementos duplicados en items , porque cada :key debe ser única.

En el segundo caso, v-for también itera sobre todos los elementos de items , pero introduce otra variable llamada i , que representa el índice numérico del item en items . A continuación, este índice se asigna a :key . Esto es mejor, porque los índices no se pueden duplicar.

Como el propósito de :key es dar a hint for Vue virtual DOM algorithm about change detection happen . Esencialmente, ayuda a Vue a identificar qué ha cambiado y qué no.

Para entenderlo mejor, estoy agregando los usos de ambos escenarios :

• :key="item" - Si el artículo tiene un valor único. De modo que a cada elemento iterado se le asigne una clave única.

  

• :key="index" - Si el artículo no tiene un valor único. Por lo tanto, para asignar una clave única a cada elemento iterado, estamos usando index .