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.
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>
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:
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:
We hope to add an F between B and C. The default implementation of the Diff algorithm is as follows:
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.
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. SummarizeThis 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:
|
<<: HTML pop-up transparent layer instance size can be set and can be proportional
>>: Ubuntu installation graphics driver and cuda tutorial
Recommend
Usage of if judgment in HTML
In the process of Django web development, when wr...
Reflection and Proxy in Front-end JavaScript
Table of contents 1. What is reflection? 2. Refle...
Six weird and useful things about JavaScript
Table of contents 1. Deconstruction Tips 2. Digit...
Detailed explanation of the misunderstanding between MySQL and Oracle
Table of contents Essential Difference Database s...
TimePicker in element disables part of the time (disabled to minutes)
The project requirements are: select date and tim...
MySQL 8.0.15 download and installation detailed tutorial is a must for novices!
This article records the specific steps for downl...
Example analysis of mysql shared lock and exclusive lock usage
This article uses examples to illustrate the usag...
Solve the problem that the default value of CSS3 transition-delay attribute is 0 without unit and it is invalid
Today I would like to share with you the CSS3 tra...
Summary of ten principles for optimizing basic statements in MySQL
Preface In the application of database, programme...
Detailed steps to store emoji expressions in MySQL
Caused by: java.sql.SQLException: Incorrect strin...
Velocity.js implements page scrolling switching effect
Today I will introduce a small Javascript animati...
Linux jdk installation and environment variable configuration tutorial (jdk-8u144-linux-x64.tar.gz)
It is recommended to use the sudo su command to s...
Detailed tutorial on running multiple Springboot with Docker
Docker runs multiple Springboot First: Port mappi...
Windows platform configuration 5.7 version + MySQL database service
Includes the process of initializing the root use...
JavaScript color viewer
This article example shares the specific code of ...