一、基本列表

1. v-for指令: （1）用于展示列表数据 （2）语法：v-for="(item, index) in xxx" :key="yyy" （3）遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

   <!-- 遍历数组 -->
   <li v-for="(p,index) of persons" :key="index">
   	{{p.name}}-{{p.age}}
   </li>
   
   <!-- 遍历对象 -->
   <li v-for="(value,k) of car" :key="k">
   	{{k}}-{{value}}
   </li>
   
   <!-- 遍历字符串 -->
   <li v-for="(char,index) of str" :key="index">
   	{{char}}-{{index}}
   </li>
   
   <!-- 遍历指定次数 -->
   <li v-for="(number,index) of 5" :key="index">
   	{{index}}-{{number}}
   </li>
   

2. react、vue中的key有什么作用？（面试题）:
   • 虚拟DOM中key的作用：key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较。
   • 对比规则：（1）旧虚拟DOM中找到了与新虚拟DOM相同的key：若虚拟DOM中内容没变, 直接使用之前的真实DOM！若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。（2）旧虚拟DOM中未找到与新虚拟DOM相同的key，创建新的真实DOM，随后渲染到到页面。
   • 用index作为key可能会引发的问题：若对数据进行：逆序添加、逆序删除等破坏顺序操作会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。如果结构中还包含输入类的DOM会产生错误DOM更新 ==> 界面有问题。
   • 开发中如何选择key?:最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

二、列表操作

1. 列表过滤：根据搜索内容对列表进行过滤。

   //用watch实现
   new Vue({
   	el:'#root',
   	data:{
   		keyWord:'',         //设计初始搜索关键字为空
   		persons:[                    //搜索列表
   			{id:'001',name:'马冬梅',age:19,sex:'女'},
   			{id:'002',name:'周冬雨',age:20,sex:'女'},
   			{id:'003',name:'周杰伦',age:21,sex:'男'},
   			{id:'004',name:'温兆伦',age:22,sex:'男'}
   		],
   		filPerons:[]         //由于不能随意覆盖原列表，因为会影响下一次搜索，因此准备一个空列表接收过滤后的值
   	},
   	watch:{
   		keyWord:{
   			immediate:true,        //希望在为搜索时便能显示全部信息，因此以关键词为空，做一次搜索，搜索结果即为列表内的全部
   			handler(val){
   				this.filPerons = this.persons.filter((p)=>{      //不是Vue内的函数尽量使用指针方式
   					return p.name.indexOf(val) !== -1         //indexOf()的语法规则是：若包括val便返回位置（0，1，2...）
   				})
   			}
   		}
   	}
   }) 

   //用computed实现
   new Vue({
   	el:'#root',
   	data:{
   		keyWord:'',
   		persons:[
   			{id:'001',name:'马冬梅',age:19,sex:'女'},
   			{id:'002',name:'周冬雨',age:20,sex:'女'},
   			{id:'003',name:'周杰伦',age:21,sex:'男'},
   			{id:'004',name:'温兆伦',age:22,sex:'男'}
   		]
   	},
   	computed:{
   		filPerons(){
   			return this.persons.filter((p)=>{    //返回的是所有匹配成果的信息
   				return p.name.indexOf(this.keyWord) !== -1   //返回的是匹配成功的p，也是单条信息
   			})
   		}
   	}
   }) 
   

2. 列表排序：根据年龄等设定信息对列表进行排序（一般排序和筛选会同时出现）

   computed:{
   	filPerons(){
   　　             //过滤操作
   		const arr = this.persons.filter((p)=>{    //将过滤好的数据保存起来，方便排序的使用
   		return p.name.indexOf(this.keyWord) !== -1
   		})
   		//判断一下是否需要排序
   		if(this.sortType){
   			arr.sort((p1,p2)=>{
   				return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
   			})
   		}
   		return arr
   	}
   }
   

3. 列表的系列操作:

   const vm = new Vue({
   	el:'#root',
   	data:{
   		student:{
   			name:'tom',
   			age:18,
   			hobby:['抽烟','喝酒','烫头'],
   			friends:[
   				{name:'jerry',age:35},
   				{name:'tony',age:36}
   			]
   		}
   	},
   	methods: {  
   		addSex(){                                                       //添加性别属性，下面是两种添加方法
   			// Vue.set(this.student,'sex','男')
   			this.$set(this.student,'sex','男')
   		},
   		addFriend(){
   			this.student.friends.unshift({name:'jack',age:70})      //添加朋友信息
   		},
   		updateFirstFriendName(){
   			this.student.friends[0].name = '张三'                    //修改朋友姓名
   		},
   		addHobby(){
   			this.student.hobby.push('学习')                          //添加一个爱好
   		},
   		updateHobby(){
   			// this.student.hobby.splice(0,1,'开车')                  //更改爱好，三种方法
   			// Vue.set(this.student.hobby,0,'开车')
   			this.$set(this.student.hobby,0,'开车')
   		},
   		removeSmoke(){
   			this.student.hobby = this.student.hobby.filter((h)=>{      //过滤爱好
   				return h !== '抽烟'
   			})
   		}
   	}
   })
   

三、Vue数据监测原理

1. vue会监视data中所有层次的数据。
2. 如何监测对象中的数据？通过setter实现监视，且要在new Vue时就传入要监测的数据。 （1）对象中后追加的属性，Vue默认不做响应式处理.（2）如需给后添加的属性做响应式，请使用如下API：
   • Vue.set(target，propertyName/index，value)
   • vm.$set(target，propertyName/index，value)
3. 如何监测数组中的数据？通过包裹数组更新元素的方法实现，本质就是做了两件事：（1）调用原生对应的方法对数组进行更新。（2）重新解析模板，进而更新页面。
4. 在Vue修改数组中的某个元素一定要用如下方法：（1）使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse().（2）Vue.set() 或 vm.$set() 特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！