提示:该文章为笔者的个人笔记并不是权威,如有错误,谢谢指出。
列表渲染
v-for 把一个数组对应为一组元素
我们可以使用v-for 来渲染一个列表,v-for 需要以 item in items 形式的特殊语法。
<div id="root">
<ul>
<h2>人员列表</h2>
<li v-for="p in persons" :key="p.id">{{p.name}} - {{p.age}}<li>
</ul>
<div>
<script>
new Vue({
el: '#root',
data() {
return {
persons: [
{
id: 01,
name: '张三',
age: 18
},
{
id: 02,
name: '李四',
age: 19
},
{
id: 03,
name: '王五',
age: 20
}
]
}
}
})
</script>
v-for 遍历对象
<div id="root">
<ul>
<li v-for="(c,index) in car" :key="index">{{c}}--{{index}}</li><br>
</ul>
</div>
<script>
new Vue({
el: '#root',
data() {
return {
car: {
name: '奥迪',
color: 'red',
price: '100w',
},
}
}
})
</script>
key 的基本原理
1. 虚拟DOM中的key的作用:
key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成的【新的虚拟DOM】,随后Vue进行【新虚拟DOM】和【旧虚拟DOM】的差异比较
2. 对比规则:
(1):旧虚拟DOM中找到了与新虚拟DOM相同的key:
若虚拟DOM中内容没有改变,直接使用之前的虚拟DOM
若虚拟DOM中的内容改变了,则生成新的真是DOM,随后替换掉页面中之前的真是D
(2):旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真是DOM,随后渲染到页面
3. 用index作为key可能会引发的问题:
1. 若对数据进行:逆序添加,逆序删除等破坏顺序操作:
会产生没有必要的真是DOM更新 ==> 界面效果没问题,但是效率低
2. 如果结构中还包含输入类的DOM:
会产生错误DOM更新 ==> 界面有问题
4. 开发中如何选择key:
1. 最好使用每条数据的唯一标识作为key,比如id,手机号,身份证号,学号等唯一标识。
2. 如果不存在对数据的逆序添加,逆序删除等破坏顺序操作,仅用于渲染列表用于展示。
使用index作为key是没有问题的