Always use `key` with `v-for`JS-0623

It is recommended to provide a key attribute with v-for whenever possible, unless the iterated DOM content is simple, or intentionally relying on the default behavior for performance gains. It also helps to maintain internal component state down the subtree. Even for elements, it's a good practice to maintain predictable behavior, such as object constancy in animations. It's better to always add a unique key.

The key special attribute is primarily used as a hint for Vue’s virtual DOM algorithm to identify VNode when diffing the new list of nodes against the old list. Without keys, Vue uses an algorithm that minimizes element movement and tries to patch/reuse elements of the same type in-place as much as possible. With keys, it will reorder elements based on the order change of keys, and elements with keys that are no longer present will always be removed/destroyed.

Children of the same common parent must have unique keys. Duplicate keys will cause render errors.

Bad Practice

<template>
  <div v-for="todo in todos"/>
</template>

Recommended

<template>
  <div
    v-for="todo in todos"
    :key="todo.id"
  />
</template>