Understanding the key attribute in v-for loops

In many of this book's previous examples and exercises, you probably noticed a key attribute in all our v-for loops, as follows:

<ol>
  <user-item
    v-for="user in users"
    v-bind:user="user"
    v-bind:key="user.id"
  ></user-item>
</ol>

You may be wondering what it is and what it is for. The key attribute is a unique identity of each DOM node so that Vue can track their changes, and thus reuse and reorder existing elements. Tracking by the index is the default behavior of Vue to track nodes with v-for, so using index for the key attribute like so is redundant:

<div v-for="(user, index) in users" :key="index">
  //...
</div>

Hence, if we want Vue to track each item's identity accurately, we must bind each key attribute with a unique value by using the v-bind ...