Why can't the key value of the v-for directive be index in vue?

Why can't I use index as the key when using v-for in vue? The following article will introduce to you the reason why the key value of v-for cannot be index. I hope it will be helpful to you!

#Why can’t the key value of v-for be index?

When many people talk about this commonplace interview question, they immediately start talking about Virtual DOM and diff algorithm.

It’s okay to talk about these, but if it were me, I would first talk about the problems caused by writing the key value of v-for as index, and then talk about the principle.

I once wrote v-for, and the key value was always index. Until one day, I wrote this and caused online bug...

Let’s take a look. My online bug demonstration:

父组件代码
<Child
  v-for="(item, index) in list"
  :key="index"
  :count="item.count"
  :name="item.name"
  @delete="handleDelete(index)"
/>

list: [
    {
      count: 1,
      name: &#39;第1个元素&#39;
    },
    {
      count: 2,
      name: &#39;第2个元素&#39;
    },
    {
      count: 3,
      name: &#39;第3个元素&#39;
    }
  ]
  
handleDelete(index) {
  this.list.splice(index, 1)
},

As shown in the code and gif demonstration, click to delete the second element, and everything seems to be normal.

Wait a minute, the count value of the third element actually became 2, wtf! ! !

I was so shocked that I looked at the code of the sub-component again

子组件
<div>
  <span>{{ name }}</span>
  count值为：{{ innerCount }}
  <button @click="$emit(&#39;delete&#39;)">-</button>
</div>

props: {
  count: {
    type: Number,
    default: 0
  },
  name: {
    type: String,
    default: &#39;&#39;
  }
},
data() {
  return {
    innerCount: this.count
  } 
}

It felt like there was nothing wrong.

If I don’t believe it, I created more elements to delete and tried sorting:

Sure enough, not only was there a problem with deleting elements, but also with sorting. question.

Change the key value to item.name and try again.

<Child
  v-for="(item, index) in list"
  :key="item.name"
  :count="item.count"
  :name="item.name"
  @delete="handleDelete(index)"
/>

Normal.

It seems that it is very dangerous to write the key value as index in v-for.

After consulting the vue official documentation, I finally understood the reason:

When Vue is updating the element list rendered using v-for, it The "in-place update" strategy is used by default. If the order of the data items is changed, Vue will not move the DOM elements to match the order of the data items, but will update each element in place and ensure that they render correctly at each index position.

This default mode is efficient, but is only suitable for list rendering output that does not rely on subcomponent state or temporary DOM state (for example: form input values) .

Does not depend on the state of the subcomponent

There is a very critical line of code in the subcomponent

data() {
  return {
    innerCount: this.count
  } 
}

The innerCount is defined internally in the subcomponent, so The subcomponent has its own state. According to the official documentation, index cannot be used as the key value in this case.

Temporary DOM status

<div v-for="(item, index) in list1" :key="index">
  <input type="text" />
  <button @click="delClick(index)">删除</button>
</div>

The 2nd item was deleted, but the 3rd item in the form changed to 2 , which is the same as the example above that relies on the state of subcomponents.

Summary

When writing a list rendering, depending on the state of the subcomponent or the temporary DOM state, if there are functions such as deletion, addition, and sorting, do not use index as the key.

In fact, when writing a list for rendering, never use index as the key, the key must be a unique identifier.

As for the reason, you need to understand the diff algorithm to understand it.

Questions to be answered:

• Why can’t key be written as a random number or timestamp?
• Why does key need to be a unique identifier?

Don’t worry, I have set a flag to write 100 articles related to vue issues. I will analyze them slowly in the following articles.

I hope my vue series of articles can be helpful to you on the front-end road~

[Related recommendations: vue.js video tutorial]

The above is the detailed content of Why can't the key value of the v-for directive be index in vue?. For more information, please follow other related articles on the PHP Chinese website!