How to use keys in vue.js

Vue’s reactivity system is powerful, but sometimes the Virtual DOM needs help identifying which elements in a list have changed. This is where the key attribute comes into play. Used properly, it ensures optimal rendering performance and prevents bugs in dynamic components.

What Is the `key` Attribute in Vue?

In Vue, the key is a special attribute used in v-for loops or when conditionally rendering elements. It helps Vue distinguish between elements, especially during DOM updates.

Why Use `key`?

Without a `key`, Vue uses a "patch and reuse" strategy. This can cause issues when:

Elements are reordered
New items are added or removed
Components rely on internal state

With a key, Vue can accurately match old and new VNodes, ensuring correct rendering and component lifecycle behavior.

Basic usage of key in v-for

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

<script setup>
const items = [
  { id: 1, name: 'Vue' },
  { id: 2, name: 'React' },
  { id: 3, name: 'Svelte' }
];
</script>

Good practice

Always use a unique and stable identifier as a key. For example, item.id if each item has a unique ID.

Common mistakes to avoid

Using index as key

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

Using the array index as a key can cause issues when items are reordered or removed, leading to DOM inconsistencies and bugs. Instead, use unique identifiers, which could be item.id, item.key etc.

Performance tips

Avoid non-primitive keys like objects or arrays. Stick to strings or numbers.
Use key consistently for any v-for loop or dynamic component.
In nested structures, ensure keys are unique across sibling elements.

Conclusion

The key attribute is critical for building efficient, bug-free Vue applications. Use a unique and stable identifier (like an ID) as a key in lists and dynamic components to:

Maintain correct component state
Avoid rendering issues
Improve performance

Proper use of key isn't just a best practice — it's often essential to getting reactivity right in Vue.