List rendering
v-for instruction:
1. Used to display list data
2. Syntax: V-for = "(item, index) in XXX": key = "yyy"
3. Traversable: array, object, string (rarely used), specified number of times (rarely used)
[it can also be used for list filtering (fuzzy query) and list sorting sortType (ascending and descending)]

How Vue monitors data:
1. vue will monitor all levels of data in data.
2. How to monitor the data in the object?
Monitoring is realized through setter, and the data to be monitored is passed in when new Vue is created.
(1). Object, Vue does not respond by default
(2). To make a response to the attribute added later, please use the following API:
Vue.set(target, propertyName/index, value) or
vm.$set(target，propertyName/index，value)
3. How to monitor the data in the array?
By wrapping the update elements of the array, the essence is to do two things:
(1). Call the native corresponding method to update the array.
(2). Re parse the template to update the page.

4. When modifying an element in the Vue array, you must use the following methods:
1. Use these API s:
push() adds a new element
pop() deletes the last element
shift() deletes the first element
unshift() adds an element in the first
splice() adds or deletes an element or replaces an element at the specified position of the array
sort() sorts the array
reverse() inverts the array
2.Vue.set() or VM$ set()

Note: Vue Set() and vm$ Set() cannot add attributes to vm or vm's root data object

	<div id="root">
		<!-- Traversal array -->
		<h2>Personnel list (traversal array)</h2>
		<ul>
			<li v-for="(p,index) of persons" :key="index">
				{{p.name}}-{{p.age}}
			</li>
		</ul>

		<!-- Traversal object -->
		<h2>Car information (traversal object)</h2>
		<ul>
			<li v-for="(value,k) of car" :key="k">
				{{k}}-{{value}}
			</li>
		</ul>

		<!-- Traversal string -->
		<h2>Test traversal string (less used)</h2>
		<ul>
			<li v-for="(char,index) of str" :key="index">
				{{char}}-{{index}}
			</li>
		</ul>
		
		<!-- Traverse the specified number of times -->
		<h2>Test traversal specified times (less used)</h2>
		<ul>
			<li v-for="(number,index) of 5" :key="index">
				{{index}}-{{number}}
			</li>
		</ul>
	</div>
	
	new Vue({
			el:'#root',
			data:{
				persons:[
					{id:'001',name:'Zhang San',age:18},
					{id:'002',name:'Li Si',age:19},
					{id:'003',name:'Wang Wu',age:20}
				],
				car:{
					name:'audi A8',
					price:'70 ten thousand',
					color:'black'
				},
				str:'hello'
			}
		})`

        <div id="root">
			<h1>Student information</h1>
			<button @click="student.age++">Age+1 year</button> <br/>
			<button @click="addSex">Add gender attribute, default: Male</button> <br/>
			<button @click="student.sex = 'unknown' ">Modify gender</button> <br/>
			<button @click="addFriend">Add a friend at the top of the list</button> <br/>
			<button @click="updateFirstFriendName">Modify the name of the first friend as: Zhang San</button> <br/>
			<button @click="addHobby">Add a hobby</button> <br/>
			<button @click="updateHobby">Modify the first hobby as: driving</button> <br/>
			<button @click="removeSmoke">Filter out smoking in hobbies</button> <br/>
			<h3>full name:{{student.name}}</h3>
			<h3>Age:{{student.age}}</h3>
			<h3 v-if="student.sex">Gender:{{student.sex}}</h3>
			<h3>Hobbies:</h3>
			<ul>
				<li v-for="(h,index) in student.hobby" :key="index">
					{{h}}
				</li>
			</ul>
			<h3>Friends:</h3>
			<ul>
				<li v-for="(f,index) in student.friends" :key="index">
					{{f.name}}--{{f.age}}
				</li>
			</ul>
		</div>
		
       const vm = new Vue({
			el:'#root',
			data:{
				student:{
					name:'tom',
					age:18,
					hobby:['smoking','drink','Hot head'],
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:36}
					]
				}
			},
			methods: {
				addSex(){
					// Vue.set(this.student,'sex', 'male')
					this.$set(this.student,'sex','male')
				},
				addFriend(){
					this.student.friends.unshift({name:'jack',age:70})
				},
				updateFirstFriendName(){
					this.student.friends[0].name = 'Zhang San'
				},
				addHobby(){
					this.student.hobby.push('study')
				},
				updateHobby(){
					// this.student.hobby.splice(0,1, 'drive')
					// Vue.set(this.student.hobby,0, 'drive')
					this.$set(this.student.hobby,0,'drive a car')
				},
				removeSmoke(){
					this.student.hobby = this.student.hobby.filter((h)=>{
						return h !== 'smoking'
					})
				}
			}
		})

Interview question: what is the role of the key in react and vue? (internal principle of key)
1. Role of virtual key in DOM:
key is the identification of the virtual DOM object. When the data changes, Vue will generate a new virtual DOM according to the new data,
Then Vue compares the differences between [new virtual DOM] and [old virtual DOM], and the comparison rules are as follows:
2. Comparison rules:
(1). The same key as the new virtual DOM was found in the old virtual DOM:
①. If the content in the virtual DOM does not change, directly use the previous real DOM!
②. 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). The same key as the new virtual DOM was not found in the old virtual dom
Create a new real DOM and then render it to the page.
3. Possible problems caused by using index as key:
(1). If the data is added or deleted in reverse order, the following sequence is broken:
It will produce unnecessary real DOM updates = = > the interface effect is no problem, but the efficiency is low.
(2) If the structure also contains the DOM of the input class:
There will be an error DOM update = = > there is a problem with the interface.
4. How to select a key during development
(1) it is better to use the unique identifier of each data as key, such as id, mobile phone number, id card number, student id number and so on.
(2). If there are no destructive operations such as reverse order addition and reverse order deletion of data, it is only used for rendering the list for display,
There is no problem using index as the key.