谈谈key的唯一性特殊处理

通常：

key 管理可复用的元素，key给每个vnode的唯一id，可以依靠key，更准确、更快拿到oldVnode中对应的vnode节点 。

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

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key

特殊：

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

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误，出现莫名其妙的bug。

v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊 key 来提供一个排序提示：

<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

上面例子我们可以为数组加唯一的id，思考： 如果data中没有id呢？就要借助第三方插件 shortid提供独一无二的id。参考文档

它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用：

• 完整地触发组件的生命周期钩子
• 触发过渡

<ul>
	<li v-for="(item,index) in persons" :key="personsKeys[index]">
       ID:{{personsKeys[index]}}----{{index}}.姓名：{{item.name}},年龄：{{item.age}},性别：{{item.sex}}
    </li>
</ul>

data(){
	return{
		persons:[
			{name:'张三',age:18,sex:"男"},
			{name:'李四',age:28,sex:"女"},
			{name:'王五',age:38,sex:"男"}
		],
		personsKeys:[]
	}
},
mounted() {
	//产生唯一的key放到personsKeys中
	this.personsKeys = this.persons.map(v=>shortId.generate())
}

会产生对应的ID指向。
如果仅仅只是展示的话，index不加都可以的，
另外也可以为数组索引指定别名 (或者用于对象的键)：

<div v-for="(item, index) in persons"></div>
<div v-for="(val, key) in object"></div>  //遍历对象建议用key，不过index也可以
<div v-for="(val, name, index) in object"></div>

总结

遍历的时候，进行改变或者排序的时候，定义唯一的id是最靠谱的，尤其性能优化要考虑到严谨性！！！