vue中的key

定义

1. key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

2. 当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素

示例

<div id="app">
	<div>
		<input type="text" v-model="name">
		<button @click="unshift">前面添加</button>
		<button @click="push">后面添加</button>
		<button @click="splice">在第2条后添加</button>
		<button @click="exchange">第一条li与第二条互换</button>
	</div>
	<ul>
		<li>没有key</li>
		<li v-for="(item, i) in list">
			<input type="checkbox"> {{item.name}}
		</li>
	</ul>
	<hr>
	<ul>
		<li>key="i"</li>
		<li v-for="(item, i) in list" :key="i">
			<input type="checkbox"> {{item.name}}
		</li>
	</ul>
	<hr>
	<ul>
		<li>key="item.id"</li>
		<li v-for="(item, i) in list" :key="item.id">
			<input type="checkbox"> {{item.name}}
		</li>
	</ul>
</div>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			name: '',
			newId: 3,
			list: [{
					id: 1,
					name: '李斯'
				},
				{
					id: 2,
					name: '吕不韦'
				},
				{
					id: 3,
					name: '嬴政'
				}
			]
		},
		methods: {
			unshift() {
				this.list.unshift({
					id: ++this.newId,
					name: this.name
				})
				this.name = ''
			},
			push() {
				this.list.push({
					id: ++this.newId,
					name: this.name
				})
				this.name = ''
			},
			splice() {
				this.list.splice(2,0,{
					id: ++this.newId,
					name: this.name
				})
				this.name = ''
			},
			exchange() {
				const del = this.list.splice(1,1);
				this.list.unshift(del[0]);
			}
		}
	});
</script>

当选中吕不为时，前面添加楠楠

当选中吕不为时，后面添加楠楠

当选中吕不为时，在第二条后添加楠楠

第一条li与第二条互换

结论

key的作用就是更新组件时判断两个节点是否相同。相同就复用，不相同就删除旧的创建新的。如果不添加key组件默认都是就地复用，不会删除添加节点，只是改变列表项中的文本值，要知道节点操作是十分耗费性能的。而添加了key之后，当对比内容不一致时，就会认为是两个节点，会先删除掉旧节点，然后添加新节点。

• 没有key时，前3个节点复用，只修改值，在最后添加了一个新节点
• key="i"时，当新节点的key与旧的key相同时，则复用旧节点，key为0，1，2的节点会复用旧节点，选中的节点为key=“1”,
• key="item.id"时，此id为唯一值，所以其它3个旧节点都会复用

---

1. 如果只是交换顺序，key用 i 或者不用的性能比较好，因为只是改变节点的值，这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

2. 如果会增删数据，key用唯一标识的性能比较好，vue根据这唯一的key跟踪每个节点的身份，从而重用和重新排序现有元素，新节点的key与旧节点key相同时，会直接复用

其它用法

<transition>
    <span :key="text">{{ text }}</span>
</transition>

当 text 发生改变时， 总是会被替换而不是被修改，因此会触发过渡。