Preface
Recently I took over a Vue project, and many code snippets used keys. Based on my previous experience of getting in touch with keys, I thought about what happened to add keys to Vue? Finally, search for information and write down this blog record.
What is Key
In Vue, we usually usev-forDirective to render the list. When the data source changes, Vue updates the DOM elements as efficiently as possible to reflect these changes. However, in some cases, Vue cannot track and process which elements have changed.
When the state of a Vue component changes, Vue will re-render the component to reflect these changes. However, if this Vue component contains a list, then the list must be recreated every time it is re-rendered. When the following operations occur in this list, the entire list will be updated. If the data volume of this list is large, this operation will greatly affect performance.
- Add or delete list items
- Compare the list items and find that the position has changed
- Operation on the list through third-party plug-ins
To solve the above problem, Vue introduced a special property—key。
Key is an auxiliary identifier used to track which elements have been added, modified, and deleted. When comparing before and after, we will judge whether to reuse existing DOM nodes or destroy and rebuild based on the changes of the Key, thereby improving the rendering efficiency and performance of Vue.
In Vue's virtual DOM algorithm, elements of the same level are compared to each other in their order. If the reusable element does not have a Key set, the difference will be updated after the pairing is successful, which may cause internal state confusion.
The function of key
The key attribute is used to identify the uniqueness of an element. When the data in the list changes, Vue will compare which data is new and which data is old according to the key value, thereby rendering the new data without rendering the entire list.
- Key can tell Vue which elements are added and which elements no longer exist, thereby better grasping the state inside the entire component.
- By adding a key to each element, Vue can know more accurately which elements have been modified, reducing internal state chaos and unnecessary DOM operations, thereby improving performance.
Give it one 🌰
<template>
<ul>
<li v-for="item in items" :key="">
{{ }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Orange' }
]
};
},
mounted() {
setInterval(() => {
({ id: (), name: 'New Item' });
}, 1000);
}
};
</script>In this example, we usev-forDirectives to render a list and set a key attribute for each list item. Also use the setInterval function to add new list items regularly.
If we don't use the key attribute, Vue rerenders the entire list every time we add a new list item. This will cause performance problems and will destroy some user interaction effects. However, if we use the key attribute, Vue can determine which ones are new and which ones are old based on the unique identification of each list item. This allows you to update only the elements that need to be updated, rather than re-rendering the entire list.
The underlying principle of key
Let’s first understand the underlying principles and steps of implementing keys in Vue:
- Create a current virtual DOM and the last virtual DOM;
- After the data changes, vue will calculate which DOM elements need to be performed on what types of operations (add, delete, move, etc.) by comparing the differences between new and old virtual DOMs;
- If a key attribute is added to an element, vue will use it as a reference when calculating the difference. If the key value of an element does not change during the data update, it means that the element has not changed position, and vue will directly reuse it instead of re-rendering.
Modify the above 🌰
<template>
<button @click="add">Add Fruit</button>
<ul>
<li v-for="item in items" :key="">
{{ }}
</li>
</ul>
</template>
<script>
data() {
return {
items: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Orange' }
]
};
},
methods:{
add(){
const fruit = {'id':'4', 'name':'Chestnut'}
(fruit)
}
}
</script>When vue is rendered for the first time, it willitemsThe data in it is loaded to generate a virtual DOM, and the key value is bound at the same time, and finally loaded as the following real DOM node.
<li key="1">Apple</li> <li key="2">Banana</li> <li key="3">Orange</li>
When we clickbuttonAfter the button,itemsThe data source changes. At this time, vue is still rendering and a virtual DOM is generated again. However, the virtual DOM generated last time will be compared, and finally re-rendered according to the bound key value and loaded into the following real DOM node.
<li key="1">Apple</li> <li key="2">Banana</li> <li key="3">Orange</li> <li key="4">Chestnut</li>
This is the end of this article about this article explaining what happens after adding keys to Vue. For more related Vue key content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!