Detailed explanation of Vue's list rendering

1. v-for: traverse array contents (commonly used)
2. v-for: traverse object properties (commonly used)
3. Traversing a string (uncommon)
4. Traverse a specified number of times (not commonly used)
5. The function and principle of key

1. The role of key in virtual DOM:
2. Comparison rules:
3. Problems that may arise when using index as key:
4. How to choose key during development?

Summarize

1. v-for: traverse array contents (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
				 Lee--19
				 Liu--17 -->
		</li>
	</div>
</body>
<script type="text/javascript">
	Vue.config.productionTps=false
 	new Vue({
		el:"#div1",
		data:{
			persons:
				{id:'001',name:"张",age:18},
				{id:'002',name:"李",age:19},
				{id:'002',name:"Liu",age:17},
			]
		}
	})
</script>

2. v-for: traverse 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.productionTps=false
 	new Vue({
		el:"#div1",
		data:{
			persons:
				name:"张",
				age:18
			}
		}
	})

3. Traversing a string (uncommon)

<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.productionTps=false
 	new Vue({
		el:"#div1",
		data:{
			str:"abcde"
		}
	})
</script>

4. Traverse a 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. The function and principle of key

The index is used as the key above, but errors will occur when modifying the DOM in a disruptive order or when there is input content. Index can be used as a key only when it is used to render a page without modifying the page.

It is strongly recommended to use the unique identifier of the data, such as ID, mobile phone number, email address as the key

1. The role of key in virtual DOM:

key is the identifier of the virtual DOM object. When the data changes, Vue will generate a new virtual DOM based on the new data. Then Vue will compare the difference between the new virtual DOM and the old virtual DOM. The comparison rules are as follows:

2. Comparison rules:

(1) The same key as the new virtual DOM is 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 virtual DOM changes, a new real DOM is generated, and then the previous real DOM in the page is replaced.

(2) If the same key as the new virtual DOM is not found in the old virtual DOM, a new real DOM is created and then rendered to the page.

3. Problems that may arise when using index as key:

1. If the data is added or deleted in reverse order, which destroys the order:

Unnecessary real DOM updates will be generated ==> The interface effect is fine, but the efficiency is low.

2. If the structure also contains DOM of input class:

Will produce wrong DOM update ==> There is something wrong with the interface.

4. How to choose key during development?

1. It is best to use the unique identifier of each piece of data as the key, such as ID, mobile phone number, ID number, student number and other unique values.

2. If there is no order-destroying operation such as adding or deleting data in reverse order, and the list is only rendered for display, there is no problem using index as the key.