列表渲染
2022-03-15 本文已影响0人
冰点雨
基本列表
v-for指令：
1.用于展示列表数据
2.语法：v-for="(item,index) in xxx" :key="yyy"
3.可遍历：数组、对象、字符串(用的很少)、指定次数(用的很少)
key的原理
面试题：react、vue的key有什么作用（key的内部原理）
1.虚拟DOM中key的作用：
key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】
随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
2.对比原则：
（1）旧虚拟DOM中找到了与新虚拟DOM相同的key
若虚拟DOM中内容没变，直接使用之前的真实DOM
若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
（2）旧虚拟DOM中未找到与新虚拟DOM相同的key,创建新的真实DOM，随后渲染到页面
3.用index作为key可能会引发的问题：
( 1）若对数据进行：逆序添加、逆序删除等破坏顺序操作：
会产生没有必要的真实DOM更新 =》界面效果没问题，但效率低
（2）如果结构中还包含输入类的DOM：
会产生错误的DOM更新=》界面有问题
4.开发中如何选择key
(1)最好使用每条数据的唯一标识作为key，比如ID、手机号、身份证号、学号等
（2）如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的
<div id="root">
<!-- 遍历数组 -->
<h2>人员列表(遍历数组)</h2>
<ur>
<li v-for="(person,index) in persons" :key="person.id">
{{person.name}} - {{person.age}} - {{index}}
</li>
</ur>
<!-- 遍历对象 -->
<h2>汽车信息(遍历对象)</h2>
<ur>
<li v-for="(value,key) of car" :key="key">
{{key}} - {{value}}
</li>
</ur>
<!-- 遍历字符串 -->
<ur>
<li v-for="(char,index) of str" :key="index">
{{index}} - {{char}}
</li>
</ur>
<!-- 遍历指定次数 -->
<ur>
<li v-for="(number,index) of 5" :key="index">
{{index}} - {{number}}
</li>
</ur>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el:"#root",
data:{
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20},
],
car:{
name:'奥迪',
price:'20万',
color:'黑色'
},
str:'hello'
},
})
</script>
列表过滤
<body>
<div id="root">
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord">
<ur>
<li v-for="(p,index) in filPersons" :key="p.id">
{{p.name}} - {{p.age}} - {{p.sex}}
</li>
</ur>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
//watch实现
//#region
/*const vm = new Vue({
el:"#root",
data:{
keyWord:'',
persons:[
{id:'001',name:'马冬梅',age:34,sex:'女'},
{id:'002',name:'周冬雨',age:29,sex:'女'},
{id:'003',name:'周杰伦',age:30,sex:'男'},
{id:'004',name:'温兆伦',age:40,sex:'男'}
],
filPersons:[]
},
watch:{
keyWord:{
immediate:true,
handler(val){
this.filPersons = this.persons.filter((p)=>{
return p.name.indexOf(val) !== -1
})
}
}
}
})*/
// #region
//用computed实现
new Vue({
el:"#root",
data:{
keyWord:'',
persons:[
{id:'001',name:'马冬梅',age:34,sex:'女'},
{id:'002',name:'周冬雨',age:29,sex:'女'},
{id:'003',name:'周杰伦',age:30,sex:'男'},
{id:'004',name:'温兆伦',age:40,sex:'男'}
],
},
computed:{
filPersons(){
return this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord) !== -1
})
}
}
})
</script>
列表排序
<body>
<!--
-->
<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>
<ur>
<li v-for="(p,index) in filPersons" :key="p.id">
{{p.name}} - {{p.age}} - {{p.sex}}
</li>
</ur>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
//用computed实现
new Vue({
el:"#root",
data:{
keyWord:'',
sortType:0,//0原顺序 1：降序 2；升序
persons:[
{id:'001',name:'马冬梅',age:34,sex:'女'},
{id:'002',name:'周冬雨',age:29,sex:'女'},
{id:'003',name:'周杰伦',age:30,sex:'男'},
{id:'004',name:'温兆伦',age:40,sex:'男'}
],
},
computed:{
filPersons(){
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>
</body>
注意：更新数据时，直接赋值无效，用splice方法有效
updateMei(){
//无效
// this.persons[0]= {id:'001',name:'马老师',age:50,sex:'女'}
this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'女'})
}
