Detailed explanation of list rendering of Vue
- 2021-12-09 08:03:19
- OfStack
1. v-for: Traversing the contents of an array (commonly used)
in can also be replaced by of
<body>
<div id="div1">
<li v-for='(p,i) in persons' :key=i>
{{p.name}}--{{p.age}}
<!-- Zhang --18
Li --19
Liu --17 -->
</li>
</div>
</body>
<script type="text/javascript">
Vue.config.produnctionTps=false
new Vue({
el:"#div1",
data:{
persons:[
{id:'001',name:" Zhang ",age:18},
{id:'002',name:" Li ",age:19},
{id:'002',name:" Liu ",age:17},
]
}
})
</script>
2. v-for: Traversing object properties (commonly used)
<body>
<div id="div1">
<li v-for='(p,k) in persons' :key=k>
{{p}}--{{i}}
<!-- Zhang --name
18--age -->
</li>
</div>
</body>
<script type="text/javascript">
Vue.config.produnctionTps=false
new Vue({
el:"#div1",
data:{
persons:{
name:" Zhang ",
age:18
}
}
})
3. Traversing strings (not commonly used)
<body>
<div id="div1">
<li v-for='(p,i) in str' :key=i>
{{p}}--{{i}}
<!-- a--0
b--1
c--2
d--3
e--4 -->
</li>
</div>
</body>
<script type="text/javascript">
Vue.config.produnctionTps=false
new Vue({
el:"#div1",
data:{
str:"abcde"
}
})
</script>
4. Traverse the specified number of times (not commonly used)
<body>
<div id="div1">
<li v-for='(p,i) in 5' :key=i>
{{p}}--{{i}}
<!-- 1--0
2--1
3--2
4--3
5--4 -->
</li>
</div>
</body>
5. Function and principle of 5. key
index is used as key in all of the above, but there will be an error if you modify dom and have input content in the order of destruction. index can be used as key only when it is used to render a page without modifying the page.
It is strongly recommended to use only 1 identifier of data, such as id, mobile phone number and email number as key
1. The role of key in virtual DOM:
key is the identity of the virtual DOM object. When the data changes, Vue will generate [new virtual DOM] according to [new data], and then Vue compares the differences between [new virtual DOM] and [old virtual DOM]. The comparison rules are as follows:
2. Comparison rules:
(1). The same key as the new DOM was found in the old virtual DOM:
① If the content in the virtual DOM has not changed, use the previous real DOM directly!
② If the content in the quasi-DOM changes, a new real DOM is generated, and then the previous real DOM in the page is replaced.
(2). The same key as the new virtual DOM is not found in the old virtual DOM. Create a new real DOM and render it to the page.
3. Possible issues with index as key:
1. If the data is destroyed by adding and deleting in reverse order:
An unnecessary real DOM update will be generated = =
>
The interface effect is fine, but the efficiency is low.
2. If the structure also contains DOM for the input class:
Error DOM Update = = > There is something wrong with the interface.
4. How to choose key in development?
1. It is best to use the only one ID of each piece of data as the only one value of key, such as id, mobile phone number, ID number and student number.
2. If there is no reverse order operation such as adding and deleting data, and it is only used to render the list for display, it is no problem to use index as key.
Summarize
This article is here, I hope to give you help, but also hope that you can pay more attention to this site more content!