# v-for 指令
可遍历：数组、对象、字符串、指定次数
# key 的作用
<body> | |
<!-- 准备好一个容器 --> | |
<div id="app"> | |
<h2>人员信息</h2> | |
<button @click.once="addPeople">添加人员</button> | |
<ul> | |
<li v-for="(item,index) in persons" :key="index"> | |
- | |
</li> | |
</ul> | |
</div> | |
<script type="text/javascript"> | |
const vm = new Vue({ | |
el: '#app', | |
data: { | |
persons: [{ | |
id: 1, | |
name: '张三', | |
age: 18 | |
}, | |
{ | |
id: 2, | |
name: '李四', | |
age: 17 | |
}, | |
{ | |
id: 3, | |
name: '王五', | |
age: 19 | |
} | |
] | |
}, | |
methods: { | |
addPeople() { | |
const p = { | |
id: 4, | |
name: '刘六', | |
age: 20 | |
} | |
this.persons.unshift(p); | |
} | |
}, | |
}) | |
</script> | |
</body> |
准备一组人员信息，点击添加按钮，添加一份人员信息，展示如下
添加一个 input 框，每个 input 框输入人员信息，再点击添加，会出现问题，具体如下，此时 key 用的是 index
点击添加之后展示效果
数据出现错乱，且效率低。
数据出现错乱解析：
根据数据生成虚拟 DOM，然后将虚拟 DOM 生成真是 DOM
根据新数据生成新的虚拟 DOM
将新的虚拟 DOM 和初始虚拟 DOM 进行虚拟 DOM 对比算法，依靠的就是 key 的作用
拿到 key=0 的第一条数据，对比 <张三> 和 < 老刘 > 还有 input 框，发现 < 张三 > 和 < 老刘 > 数据不一样，但是 input 框一样，则将 < 老刘 > 生成真实 DOM，input 框使用初始虚拟 DOM 的 input 框。所以导致数据错位的问题。
