# 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

点击添加之后展示效果

数据出现错乱,且效率低。

数据出现错乱解析:

  1. 根据数据生成虚拟 DOM,然后将虚拟 DOM 生成真是 DOM

  2. 根据新数据生成新的虚拟 DOM

  3. 将新的虚拟 DOM 和初始虚拟 DOM 进行虚拟 DOM 对比算法,依靠的就是 key 的作用

  4. 拿到 key=0 的第一条数据,对比 <张三> 和 < 老刘 > 还有 input 框,发现 < 张三 > 和 < 老刘 > 数据不一样,但是 input 框一样,则将 < 老刘 > 生成真实 DOM,input 框使用初始虚拟 DOM 的 input 框。所以导致数据错位的问题。

更新于