Application example tutorial of key in Vue page rendering

introduction

During the front-end project development process, the result columns displayed by el-table are introduced in the form of components. Some fields are transcoded through the :formatter method, and the field display/hide control of the result column is also introduced in the form of components. When the front-end controls the field display properties, it is found that there are problems with code value conversion and field information display.

Problem Analysis

By reading the code structure, we find that el-table-column is generated through a template loop. Since template is a template placeholder, it can help us wrap elements, but during the loop, template will not be rendered on the page. The role of key in table data rendering is as follows:

• Key is the identification value of a DOM node, and combined with the Diff algorithm, the node can be reused. (Nodes with the same key will be reused);
• Only when the key (or other things that cause isSameNode to be false) changes will the node be re-rendered. Otherwise, Vue will reuse the previous node and update the node by changing the node's properties.

At the same time, the template tag does not support the :key attribute.

Note: The template tag inside the element bound to the vue instance does not support the v-show directive, that is, v-show="false" does not work for the template tag. However, the template tag now supports v-if, v-else-if, v-else, and v-for instructions.

Workaround

Since the template tag does not support the key attribute, you can add the key="Math.random()" attribute to the el-table-column tag. This key attribute is a special attribute of Vue, which is mainly used in Vue's virtual DOM algorithm to identify VNodes when comparing new and old nodes, thereby improving page rendering performance. If this key is not updated, parts of the DOM will not be re-rendered when showing/hiding columns, resulting in confusion when the table changes.

Further reading

1. The role of key

As mentioned above, as an identification value of a DOM node, the node can be reused in combination with the Diff algorithm. (Nodes with the same key will be reused.)

Only when the key (or other things that cause isSameNode to be false) changes will the node be re-rendered. Otherwise, Vue will reuse the previous node and update the node by changing the node's properties. So, what is the difference between using id and index as key?

2. The difference between using id and index for key

It is not recommended to use index as the key, because this will cause some nodes to be reused in place incorrectly, as follows:

• Performance loss: When the list is rendered, all list nodes (content) after the changed item will be updated (equivalent to the key not working).
• An error occurred: Some nodes were reused in the wrong place. (For example, when a checkbox is used in a list item)

Performance loss

When the list is rendered, all list nodes (content) after the changed item will be updated (equivalent to the key not working)

It should be noted that the update of all list nodes after the change item is essentially the update of node attributes, and the nodes themselves will be reused.

<!-- Test code -->
<template>
 <div>
 <div v-for="(item, index) in arr" :key="index or item.id">
  {{item.data}}
 </div>
 </div>
</template>

<script>
export default {
 name: 'HelloWorld',
 data(){
 return {
  arr: Array.from({length: 10000}, (v, i) => {return {id: i, data: i}})
 }
 },
 mounted(){
 setTimeout(()=>{
  /* 
  1. this.shiftArr() // delete the first item or 2. this.unShiftArr() // insert a new item at the beginning */
 }, 1000)
 },
 methods: {
 shiftArr(){
  this.arr.shift();
 },
 unshiftArr(){
  this.arr.unshift({id: -1, data: -1});
 }
 }
}
</script>

The example above is very simple. v-for renders a list of length 10,000. Then, after Vue is mounted for 1 second, it executes a deletion of the first item in the list or an insertion of a new item in the list header, and observes the specific page update overhead of the two key bindings.

Page overhead is measured using Chrome's performance tab

Delete the first item in the list

Unshift the head of the list to the new element

An error occurred

Some nodes are reused in the wrong place. (For example, when a checkbox is used in a list item)

<!-- Test code -->
<template>
 <div>
 <button @click="test">Delete the first item in the list</button>
 <div v-for="(item, index) in arr" :key="index or item.id">
  <input type="checkbox" />
  {{item.data}}
 </div>
 </div>
</template>

<script>
export default {
 name: 'HelloWorld',
 data(){
 return {
  arr: Array.from({length: 5}, (v, i) => {return {id: i, data: i}})
 }
 },
 methods: {
 test(){
  this.arr.shift();
 }
 }
}
</script>

Summarize

This is the end of this article about the application of key in Vue page rendering. For more relevant application content of Vue page rendering key, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!