【Vue】学习笔记-列表渲染/数据监视

基本列表

v-for指令

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

        <div id="root"><!--遍历数组--><ul><h3>遍历数组</h3><li v-for="p in persons " :key="p.id">{{p.name}}-{{p.age}}</li><h3>遍历数组-index</h3><li v-for="(p,index)  in  persons" :key="index">{{p.name}}--{{p.age}}-{{index}}</li></ul><!--遍历对象--><ul><h3>遍历对象</h3><li v-for="(value,k) of car" :key="k">{{k}}-{{value}}</li></ul><!--遍历字符串--><ul><h3>遍历字符串</h3><li v-for="(char,index) of str" :key="index">{{char}}-{{index}}</li></ul><!--测试遍历指定次数--><ul><h3>测试遍历指定次数</h3><li v-for="(number,index) of 5" :key="index">{{number}}-{{index}}</li></ul>           </div><script type="text/javascript">Vue.config.productionTip =false 阻止Vue启动时生成提示//创建Vue实列const vm=new Vue({el:'#root', //el 用于指定当前Vue实例未哪个容器服务，值通常为css选择器字符串。document.getElementById(root) data: {persons:[{id:001,name:"张三",age:18},{id:002,name:"李四",age:19},{id:003,name:"王五",age:20}],car:{name:'奥迪A8',price:'70万',color:'黑色'},str:"hello" }});</script>

Key的作用与原理

原理：


面试题：react. vue中的key有什么用？(key的内部原理)

1. 虚拟Dom中key的作用：

• key是虚拟DOM对象的标识，档数据发生改变时,Vue会根据【新数据】生成【新的虚拟DOM】,
• 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

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

        <div id="root"><!--遍历数组--><h3>遍历数组</h3><button @click.once="add">添加一个老刘</button><ul><li v-for="p in persons " :key="p.id">{{p.name}}-{{p.age}}<input type="text"></li></ul>         </div><script type="text/javascript">Vue.config.productionTip =false 阻止Vue启动时生成提示//创建Vue实列const vm=new Vue({el:'#root', data: {persons:[{id:001,name:"张三",age:18},{id:002,name:"李四",age:19},{id:003,name:"王五",age:20}]},methods:{add(){const p=  {id:004,name:"老刘",age:40}this.persons.unshift(p)}}});</script>

列表过滤

		<!-- 准备好一个容器--><div id="root"><h2>人员列表</h2><input type="text" placeholder="请输入名字" v-model="keyWord"><ul><li v-for="(p,index) of filPerons" :key="index">{{p.name}}-{{p.age}}-{{p.sex}}</li></ul></div><script type="text/javascript">Vue.config.productionTip = false//用watch实现//#region /* 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)=>{return p.name.indexOf(val) !== -1})}}}}) *///#endregion//用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})}}}) </script>

列表排序

		<div id="root"><h2>人员列表</h2><input type="text" placeholder="请输入名字" v-model="keyWord"><button @click="sortType = 2">年龄升序</button><button @click="sortType = 1">年龄降序</button><button @click="sortType = 0">原顺序</button><ul><li v-for="(p,index) of filPerons" :key="p.id">{{p.name}}-{{p.age}}-{{p.sex}}<input type="text"></li></ul></div><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el:'#root',data:{keyWord:'',sortType:0, //0原顺序 1降序 2升序persons:[{id:'001',name:'马冬梅',age:30,sex:'女'},{id:'002',name:'周冬雨',age:31,sex:'女'},{id:'003',name:'周杰伦',age:18,sex:'男'},{id:'004',name:'温兆伦',age:19,sex:'男'}]},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}}}) </script>

Vue 数据监视

更新时的一个问题
this.persons[0] = {id:‘001’,name:‘马老师’,age:50,sex:‘男’} 更改data数据，Vue不监听，模板不改变。

		<div id="root"><h2>人员列表</h2><button @click="updateMei">更新马冬梅的信息</button><ul><li v-for="(p,index) of persons" :key="p.id">{{p.name}}-{{p.age}}-{{p.sex}}</li></ul></div><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{persons:[{id:'001',name:'马冬梅',age:30,sex:'女'},{id:'002',name:'周冬雨',age:31,sex:'女'},{id:'003',name:'周杰伦',age:18,sex:'男'},{id:'004',name:'温兆伦',age:19,sex:'男'}]},methods: {updateMei(){// this.persons[0].name = '马老师' //奏效// this.persons[0].age = 50 //奏效// this.persons[0].sex = '男' //奏效// this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} //不奏效this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'})}}}) </script>

模拟数据监测：

		<script type="text/javascript" >let data = {name:'尚硅谷',address:'北京',}//创建一个监视的实例对象，用于监视data中属性的变化const obs = new Observer(data)		console.log(obs)	//准备一个vm实例对象let vm = {}vm._data = data = obsfunction Observer(obj){//汇总对象中所有的属性形成一个数组const keys = Object.keys(obj)//遍历keys.forEach((k)=>{Object.defineProperty(this,k,{get(){return obj[k]},set(val){console.log(`${k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`)obj[k] = val}})})}</script>

原理

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的根数据对象 添加属性！！！

	<body><!-- 准备好一个容器--><div id="root"><h1>学生信息</h1><button @click="student.age++">年龄+1岁</button> <br/><button @click="addSex">添加性别属性，默认值：男</button> <br/><button @click="student.sex = '未知' ">修改性别</button> <br/><button @click="addFriend">在列表首位添加一个朋友</button> <br/><button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br/><button @click="addHobby">添加一个爱好</button> <br/><button @click="updateHobby">修改第一个爱好为：开车</button> <br/><button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br/><h3>姓名：{{student.name}}</h3><h3>年龄：{{student.age}}</h3><h3 v-if="student.sex">性别：{{student.sex}}</h3><h3>爱好：</h3><ul><li v-for="(h,index) in student.hobby" :key="index">{{h}}</li></ul><h3>朋友们：</h3><ul><li v-for="(f,index) in student.friends" :key="index">{{f.name}}--{{f.age}}</li></ul></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。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 !== '抽烟'})}}})</script>