本文详细介绍了Vue中列表渲染的基本用法、key的原理，包括利用index和id作为key的区别，以及在数据更新时遇到的问题和Vue.set的使用。讨论了Vue检测数据改变的机制，特别强调了在开发中选择key的最佳策略和列表过滤、排序的方法。
基本列表
1.用于展示列表数据
2.语法: v-for="(item, index) in xxx" ;key="yyy"
3.可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)
<body>
<div id="root">
<!-- 遍历数组 -->
<h2>人员列表</h2>
<ul>
<li v-for="(p,index) of persons" :key="p.id">
<!-- 姓名-年龄 -->
{{p.name}}-{{p.age}}
</li>
</ul>
<!-- 遍历对象 -->
<h2>汽车信息</h2>
<ul>
<li v-for="(value,k) of car" :key="k">
{{k}}-{{value}}
</li>
</ul>
<!-- 遍历字符串 -->
<h2>测试遍历字符串（用得少）</h2>
<ul>
<li v-for="(char,index) of str" :key="index">
{{index}}-{{char}}
</li>
</ul>
<!-- 遍历指定次数 -->
<h2>测试遍历指定次数（用得少）</h2>
<ul>
<li v-for="(number,index) of 5" >
{{index}}-{{number}}
</li>
</ul>
</div>
<script>
//阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
var 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:'70w',
color:'黑色'
},
str:'hello'
},
})
</script>
</body>key原理
利用index作为key
<body>
<div id="root">
<!-- 遍历数组 -->
<h2>人员列表</h2>
<button @click.once="add">添加一个老刘</button>
<ul>
<li v-for="(p,index) of persons" :key="index">
{{p.name}}-{{p.age}} <input type="text">
</li>
</ul>
</div>
<script>
//阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
var 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>
</body>生成页面后，在文本框输入文字，再点击添加按钮
添加后效果
原因
利用id作为key
<body>
<div id="root">
<!-- 遍历数组 -->
<h2>人员列表</h2>
<button @click.once="add">添加一个老刘</button>
<ul>
<li v-for="(p,index) of persons" :key="p.id">
{{p.name}}-{{p.age}} <input type="text">
</li>
</ul>
</div>
<script>
//阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
var 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>
</body>效果：
原因
面试题: 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>
<input type="text" placeholder="请输入名字" v-model="keyWord">
<ul>
<li v-for="(p,index) of filPersons" :key="p.id">
<!-- 姓名-年龄 -->
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>法一：用watch监听实现
var vm = new Vue({
el:"#root",
data:{
keyWord:'',
persons:[
{id:'001',name:'马冬梅',age:18,sex:'女'},
{id:'002',name:'周冬雨',age:19,sex:'女'},
{id:'003',name:'周杰伦',age:20,sex:'男'},
{id:'004',name:'温兆伦',age:20,sex:'男'},
],
filPersons:[]
},
watch:{
keyWord:{
immediate:true,
handler(val){
//此处的p是数组中的每个对象
this.filPersons = this.persons.filter((p)=>{
// return p.name是否包含val
return p.name.indexOf(val) != -1;
//return后面跟上过滤条件（匹配条件）要的是有重复的即为不等于-1的
})
}
}
}
})法二：用computed实现 （能用computed实现的都能用watch）
var vm = new Vue({
el:"#root",
data:{
keyWord:'',
persons:[
{id:'001',name:'马冬梅',age:18,sex:'女'},
{id:'002',name:'周冬雨',age:19,sex:'女'},
{id:'003',name:'周杰伦',age:20,sex:'男'},
{id:'004',name:'温兆伦',age:20,sex:'男'},
]
},
computed:{
filPersons(){
return this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord) != -1;
})
}
}
})
列表排序
<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 filPersons" :key="p.id">
<!-- 姓名-年龄 -->
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>
<script>
//阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
//用computed实现
var vm = new Vue({
el:"#root",
data:{
keyWord:'',
sortType:0,//0原顺序 1降序 2升序
persons:[
{id:'001',name:'马冬梅',age:30,sex:'女'},
{id:'002',name:'周冬雨',age:42,sex:'女'},
{id:'003',name:'周杰伦',age:18,sex:'男'},
{id:'004',name:'温兆伦',age:19,sex:'男'},
]
},
computed:{
filPersons(){
const arr = this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord) != -1;
})
//判断是否需要排序
if (this.sortType) {
arr.sort((a,b)=>{
return this.sortType == 1 ? b.age-a.age : a.age-b.age;
})
}
return arr;
}
}
})
</script> 
更新时的问题
用下标索引找到信息 进行复制修改操作是无效的
<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>
//阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
//用computed实现
var vm = new Vue({
el:"#root",
data:{
persons:[
{id:'001',name:'马冬梅',age:30,sex:'女'},
{id:'002',name:'周冬雨',age:42,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>
Vue.set的使用
<div id="root">
<h1>学校信息</h1>
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
<hr>
<h1>学生信息</h1>
<button @click="addSex">添加有个性别属性，默认值为男</button>
<h2>姓名：{{student.name}}</h2>
<h2 v-if="student.sex">性别：{{student.sex}}</h2>
<h2>年龄：真实{{student.age.rAge}}，对外：{{student.age.sAge}}</h2>
<h2>朋友们</h2>
<ul>
<li v-for="(f,index) in student.friends" :key="index">
{{f.name}}-{{f.age}}
</li>
</ul>
</div>
<script>
//阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
var vm = new Vue({
el:"#root",
data:{
name:'尚硅谷',
address:'北京',
student:{
name:'tom',
age:{
rAge:40,
sAge:29
},
friends:[
{name:'jerry',age:35},
{name:'jane',age:36}
]
}
},
methods:{
addSex(){
// Vue.set(this.student,'sex','男')
this.$set(this.student,'sex','男')
}
}
})
</script>
Vue检测数据改变原理
数组
如果不用Vue.set那就不能在页面渲染 （后台改变数据 页面不会发生变化）
<div id="root">
<h1>学校信息</h1>
<h2>学校名称：{{school.name}}</h2>
<h2>学校地址：{{school.address}}</h2>
<h2>校长是：{{school.leader}}</h2>
<hr>
<h1>学生信息</h1>
<button @click="addSex">添加有个性别属性，默认值为男</button>
<h2>姓名：{{student.name}}</h2>
<h2 v-if="student.sex">性别：{{student.sex}}</h2>
<h2>年龄：真实{{student.age.rAge}}，对外：{{student.age.sAge}}</h2>
<h2>爱好</h2>
<ul>
<li v-for="(h,index) in student.hobby" :key="index">
{{h}}
</li>
</ul>
<h2>朋友们</h2>
<ul>
<li v-for="(f,index) in student.friends" :key="index">
{{f.name}}-{{f.age}}
</li>
</ul>
</div>
<script>
//阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
var vm = new Vue({
el:"#root",
data:{
school:{
name:'尚硅谷',
address:'北京',
},
student:{
name:'tom',
age:{
rAge:40,
sAge:29
},
hobby:['抽烟','喝酒','烫头'],
friends:[
{name:'jerry',age:35},
{name:'jane',age:36}
]
}
},
methods:{
addSex(){
// Vue.set(this.student,'sex','男')
this.$set(this.student,'sex','男')
}
}
})
</script>
</body>总结
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).调用原生对应的方法对数组进行更新。(push unshift等)
(2).重新解析模板，进而更新页面。
4.在Vue修改数组中的某个元素定要用如下方法:
(1).使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
(2).Vue.set()或vm.$set()
特别注意: Vue.set() 和vm. $set()不能给vm或vm的根数据对象添加属性! ! !（vm或_data）
扫一扫
644
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
