When using vUE components, we often encounter that v-for must add a key value to illustrate this example.
There is no key case
<! -- * @Author: angula * @Date: 2020-08-07 00:05:05
* @LastEditTime: 2020-08-07 00:17:21* @filepath: \Vue\study\test1\key detail.html --> <! DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <script src=".. /vue.js"></script> </head> <body> <div id="box"> <div> <input type='text' v-model="name"> <button @ click = "add" > add < / button > < / div > < ul > < li v - for = "(item, I) in the list" > < input type = "checkbox" > {{item. The name}} < / li > < / ul > </div> <script> var vm = new Vue({el: '#box', data: {name: '', id: 3, list: [{id: 1, name: ''}, {id: 2, name: 'bill'}, {id: 3, name: 'the king 2}}, the methods: {the add () {this. The list. The unshift ({id: + + this id, name: this.name }) this.namne = '' } } }); </script> </body> </html>Copy the codeAt this point we select the last value
At this point we choose to add a value
At this point, we see that the selected value has changed from king 2 to Li 4
There are key value cases
div id="box">
<div>
<input type='text' v-model="name">
<button @click="add">add</button>
</div>
<ul>
<li v-for="(item,i) in list" :key="item.id">
<input type="checkbox">{{item.name}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#box'.data: {
name: ' '.id: 3.list: [{id: 1.name: 'Joe' },
{ id: 2.name: 'bill' },
{ id: 3.name: 'the king 2'}},methods: {
add() {
this.list.unshift({ id: + +this.id, name: this.name })
this.namne = ' '}}});</script>
Copy the codeAt this point, we still choose King Two
, and then we add a pockmarked, and then observe whether the selected wang 2?
At this point, it is clear that the selected value does not change after the key value is added!
After adding a unique key, the id checkbox is associated with the content, which is what we are showing
diff
Diff algorithm processing method
Compare nodes at the same layer of the DOM tree before and after the operation, layer by layer, as shown in the figure below:
When there are many identical nodes in a certain layer, that is, list nodes, the update process of Diff algorithm also follows the above principle by default. Here’s an example:
We want to add an F between B and C. The Diff algorithm defaults to this:
Update C to F, D to C, E to D, and finally insert E, which is pretty inefficient! Therefore, we need to use key to make a unique identification for each node, so that the Diff algorithm can correctly identify this node and find the correct location area to insert a new node.
The list loop in VUE needs to add :key=” unique identifier “. The unique identifier can be the ID in item, etc., because vUE components are highly reusable, adding keys can identify the uniqueness of components. In order to better distinguish each component key, the main function is to update the virtual DOM efficiently.But we don’t recommend using index as key!
conclusion
Summary: The key’s main purpose is to update the virtual DOM efficiently. Using the key value, it rearranges the element order based on the key change and removes the element where the key does not exist. It can also be used to force replacement of elements/components rather than reuse them.
Why not recommend index as the key
When the index of an array is used as a key, a change in one of the elements (such as add, delete, change, or check) may result in a change in the key of all the elements. Diff compares the difference between the two elements and associates them with the key. When an array is subscript transformed, such as deleting the first item, Then all indexes will change in the future, and the key will change as well. Therefore, index as a key value is unstable, and this instability may lead to a waste of performance, resulting in the failure of diFF to associate the same data as last time. Therefore, do not use index unless you can use index as the key.