How do you reuse elements with key attribute?

In Vue, the key attribute is crucial for the virtual DOM algorithm to efficiently manage updates by identifying elements for reuse and maintaining the state of internal components and the DOM. Specifically, it is used when rendering lists to assign a unique identifier to each node or component, enabling Vue to identify nodes during the Diff process for optimal performance.

Using Scenarios

1. List Rendering

When using v-for for list rendering, it is recommended to assign a unique key value to each item. This allows Vue to track the identity of each node, enabling efficient DOM updates when data changes. For example:

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

In this example, assume items is an array of objects, each with a unique id property and a text property. By assigning :key="item.id" to the li element, Vue can correctly reuse and reorder existing DOM elements when the items array updates.

2. Component Reuse

When the same component needs to be rendered multiple times under different conditions, the key can be used to manage component reuse. For instance, if you have a dynamic component that loads different content based on user input, you can use different key values to force Vue to rebuild the component rather than reuse it.

html
<template>
  <div>
    <my-component :key="componentKey"></my-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      componentKey: 1
    }
  },
  methods: {
    changeComponent() {
      this.componentKey++;
    }
  }
}
</script>

In this example, each call to the changeComponent method increments componentKey, causing Vue to destroy the old my-component instance and create a new one, allowing the component to reinitialize its state based on the new input.

Summary

By properly utilizing the key attribute, Vue can intelligently manage DOM updates, minimizing unnecessary element destruction and recreation, which enhances rendering performance. For large-scale applications, correct implementation of key can significantly improve responsiveness and user experience.