Vue3 key Attribute

Vue3 内置属性Vue3 Built-in Attributes

keyThe attribute is a critical special attribute of Vue's virtual DOM algorithm, mainly used to help Vue identify the uniqueness of each node, thereby efficiently updating the virtual DOM.

Basic Description

keyThe attribute is used to provide a unique identifier for Vue components or elements. In list rendering, eachv-forelement in the loop should have a uniquekeyattribute.

  • Type: String | Number
  • Purpose: Provides a unique identifier for each element in list rendering, helping Vue efficiently diff and reuse DOM nodes.

How It Works

When Vue performs virtual DOM diffing, when there is nokeykey, Vue uses an algorithm that minimizes element movement, reusing same-type elements in place as much as possible. When there iskeykey, Vue reorders elements according to key order changes and removes elements whose key no longer exists.

Children of the same parent element must have unique keys. Duplicate keys will cause rendering errors.

Basic Usage

The most common usage is in combinationv-forwith v-for:

Example

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

Use Cases

1. List Rendering

Inv-forusing keykeyis the most common scenario:

Example

<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: 'zhangsan@example.com' },
{ id: 2, name: 'Li Si', email: 'lisi@example.com' },
{ id: 3, name: 'Wang Wu', email: 'wangwu@example.com' }
      ]
    }
  }
}
</script>

2. Forcing Element Replacement

keyIt can also be used to force replacement of elements or components instead of reusing them. This is useful in the following scenarios:

  • Correctly triggering component lifecycle hooks
  • Triggering transition animations

Example

<template>
  <div>
    <input v-model="text" placeholder=When the input content />
    <transition>
      <span :key="text">{{ text }}</span>
    </transition>
  </div>
</template>

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

Whentextchanges,<span>the element is replaced instead of reused, thus triggering the transition effect.

Notes

key should be unique and stable: the value of key should not change as data changes, otherwise it will affect Vue's performance and virtual DOM reuse strategy.

Avoid using index as key: unless you explicitly know that the order of list items will not change. Because the index is based on position, when the list order changes, the key also changes, causing Vue to be unable to correctly reuse DOM nodes.

Example

<!-- Not recommended: using index as key (when list order changes) -->
<li v-for="(item, index) in items" :key="index">{{ item.name }}</li>

<!-- Recommended: using unique ID as key -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>

Using with v-for

keyandv-forWhen used together, there are several syntaxes:

Example

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

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

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

<!-- Number iteration -->
<span v-for="n in 5" :key="n">{{ n }}</span>

Vue3 内置属性Vue3 Built-in Attributes

Other Extensions