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

Steps to encapsulate the carousel component in vue3.0

Detailed explanation of :key in VUE v-for

Summarize

Steps to encapsulate the carousel component in vue3.0

Table shows the border code you want to display

HTML Table Tag Tutorial (47): Nested Tables

Detailed explanation of how Node.js middleware works

Detailed explanation of ensuring the consistency of MySQL views (with check option)

Docker primary network port mapping configuration

HTML iframe usage summary collection

MySQL optimization solution: enable slow query log

Docker installs mysql and solves the Chinese garbled problem

MySQL optimization connection optimization

Recommend

A brief discussion on JS packaging objects

How to make spaces have the same width in IE and FF?

Implementation of Node connection to MySQL query transaction processing

MySQL 8.0.11 installation and configuration method graphic tutorial (win10)

How to build your own Angular component library with DevUI

MySQL functional index optimization solution

What are the advantages of MySQL MGR?

Analysis of the HTML writing style and reasons of experienced people

Detailed explanation of 10 common HTTP status codes

JavaScript canvas to achieve meteor effects

Vue uses el-table to dynamically merge columns and rows

Use of select, distinct, and limit in MySQL

Detailed explanation of the reasons and optimizations for the large offset affecting performance during MySQL query

How to query the intersection of time periods in Mysql

This article will help you get started and understand the basic operations of Jquery