Detailed explanation of :key in VUE v-for

When key is not added to the v-for tag.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="../../js/vue.js"></script>
  <title>About v-for key</title>
</head>
<body>
  <div id="app">
    <div>
      <input type="text" v-model="name">
      <button @click="add">Add</button>
    </div>
    <ul>
      <li v-for="(item, index) in list">
        <input type="checkbox"> {{item.name}}
      </li>
    </ul>
  </div>
  <script type="text/javascript">
    const app = new Vue({
      el: '#app',
      data() {
        return {
          name: '',
          newId: 3,
          list: [
            { id: 1, name: '张三' },
            { id: 2, name: 'Li Si' },
            { id: 3, name: '王五' }
          ],
        };
      },
      computed: {
      },
      methods: {
        add() {
          //Note that this is unshift
          this.list.unshift({ id: ++this.newId, name: this.name })
          this.name = ''
        }
      },
    });
  </script>
  <style scoped>
  </style>
</body>
</html>

After we selected Li Si and added Zhao Liu, the selected person became Zhang San.

insert image description here

Let's look at the case where v-for has a key:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="../../js/vue.js"></script>
  <title>About v-for key</title>
</head>
<body>
  <div id="app">
    <div>
      <input type="text" v-model="name">
      <button @click="add">Add</button>
    </div>
    <ul>
      <li v-for="(item, index) in list" :key="item.id">
        <input type="checkbox"> {{item.name}}
      </li>
    </ul>
  </div>
  <script type="text/javascript">
    const app = new Vue({
      el: '#app',
      data() {
        return {
          name: '',
          newId: 3,
          list: [
            { id: 1, name: '张三' },
            { id: 2, name: 'Li Si' },
            { id: 3, name: '王五' }
          ],
        };
      },
      computed: {
      },
      methods: {
        add() {
          //Note that this is unshift
          this.list.unshift({ id: ++this.newId, name: this.name })
          this.name = ''
        }
      },
    });
  </script>
  <style scoped>
  </style>
</body>
</html>

insert image description here

After we select Li Si and add Zhao Liu, the selected person is still Li Si, there is no change.

This is due to the Diff algorithm at the bottom of Vue. The processing method of the diff algorithm is to compare the nodes at the same level of the DOM tree before and after the operation, layer by layer, as shown in the following figure:

insert image description here

When there are many identical nodes in a layer, that is, list nodes, the update process of the Diff algorithm also follows the above principles by default.

For example, take this situation:

insert image description here

We hope to add an F between B and C. The default implementation of the Diff algorithm is as follows:

insert image description here

That is, update C to F, D to C, E to D, and finally insert E. Isn't this inefficient?

Therefore, we need to use a key to uniquely identify each node so that the Diff algorithm can correctly identify the node and find the correct location to insert the new node.

insert image description here

The list loop in vue needs to add: key = "unique identifier". The unique identifier can be the id index in the item, etc. Because vue components are highly reused, adding Key can identify the uniqueness of the component. In order to better distinguish each component, the main function of the key is to efficiently update the virtual DOM.

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:

Detailed explanation of key uniqueness of v-for in Vue
Why can't I use index as key when using v-for in Vue?
A brief discussion on why to add key in VUE demonstration v-for
Solve the problem of key value error when traversing the loop of vue v-for
Summary of considerations for key attributes of v-for loop in Vue
A brief discussion on the changes in v-for iteration syntax in Vue 2.0 (key, index)

<<: HTML pop-up transparent layer instance size can be set and can be proportional

>>: Ubuntu installation graphics driver and cuda tutorial