key是什么？
首先我们知道不管是vue还是react，在循环渲染的时候，我们都需要给每一个vnode绑定一个key值，并且这个key值是唯一的，简单来讲，key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点。那么我们使用什么作为key值最合适呢？下面就详细说一下吧
一、不推荐使用index索引作为key值
为什么不推荐使用 index 作为 key？
示例：
以这样一个列表为例：
<div id="app">
<ul>
<item
:key="index"
v-for="(num, index) in nums"
:num="num"
:class="`item${num}`"
></item>
</ul>
<button @click="change">改变</button>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
name: "parent",
el: "#app",
data: {
nums: [1, 2, 3]
},
methods: {
change() {
this.nums.reverse();
}
},
components: {
item: {
props: ["num"],
template: `
<div>
{{num}}
</div>
`,
name: "child"
}
}
});
</script>
其实是一个很简单的列表组件，渲染出来 1 2 3 三个数字。我们先以 index 作为key，来跟踪一下它的更新。
我们接下来只关注 item 列表节点的更新，在首次渲染的时候，我们的虚拟节点列表 oldChildren 粗略表示是这样的：
[
{
tag: "item",
key: 0,
props: {
num: 1
}
},
{
tag: "item",
key: 1,
props: {
num: 2
}
},
{
tag: "item",
key: 2,
props: {
num: 3
}
}
];
在我们点击按钮的时候，会对数组做 reverse 的操作。那么我们此时生成的 newChildren 列表是这样的：
[
{
tag: "item",
key: 0,
props: {
+ num: 3
}
},
{
tag: "item",
key: 1,
props: {
+ num: 2
}
},
{
tag: "item",
key: 2,
props: {
+ num: 1
}
}
];
发现什么问题没有？key的顺序没变，传入的值完全变了。这会导致一个什么问题？
本来按照最合理的逻辑来说，旧的第一个vnode 是应该直接完全复用 新的第三个vnode的，因为它们本来就应该是同一个vnode，自然所有的属性都是相同的。
但是在进行子节点的 diff 过程中，会在 旧首节点和新首节点用sameNode对比。 这一步命中逻辑，因为现在新旧两次首部节点 的 key 都是 0了，
然后把旧的节点中的第一个 vnode 和 新的节点中的第一个 vnode 进行 patchVnode 操作。
这会发生什么呢？我可以大致给你列一下：首先，正如我之前的文章props的更新如何触发重渲染？里所说，在进行 patchVnode 的时候，会去检查 props 有没有变更，如果有的话，会通过 _props.num = 3 这样的逻辑去更新这个响应式的值，触发 dep.notify，触发子组件视图的重新渲染等一套很重的逻辑。
然后，还会额外的触发以下几个钩子，假设我们的组件上定义了一些dom的属性或者类名、样式、指令，那么都会被全量的更新。
- updateAttrs
- updateClass
- updateDOMListeners
- updateDOMProps
- updateStyle
- updateDirectives
而这些所有重量级的操作（虚拟dom发明的其中一个目的不就是为了减少真实dom的操作么？），都可以通过直接复用 第三个vnode 来避免，是因为我们偷懒写了 index 作为 key，而导致所有的优化失效了。
二、不推荐使用随机数作为key值
为什么不要用随机数作为key？
<item
:key="Math.random()"
v-for="(num, index) in nums"
:num="num"
:class="`item${num}`"
/>
因为每次数据发生改变的时候就会重新渲染，而duff算法中，diff 子节点的首尾对比如果都没有命中，就会进入 key 的详细对比过程，简单来说，就是利用旧节点的 key -> index 的关系建立一个 map 映射表，然后用新节点的 key 去匹配，如果没找到的话，就会调用 createElm 方法 重新建立 一个新节点。
也就是说，咱们的这个更新过程可以这样描述：123 -> 前面重新创建三个子组件 -> 321123 -> 删除、销毁后面三个子组件 -> 321。
不推荐使用时间戳作为key值
因为页面渲染的速度是很快的，一毫秒就可能会有很多结点渲染完成，那么就无法保证唯一的key值，这是很致命的问题，所以不要使用时间戳作为key值。
总结
- 用组件唯一的
id（一般由后端返回）作为它的key，实在没有的情况下，可以在获取到列表的时候通过某种规则为它们创建一个key，并保证这个key在组件整个生命周期中都保持稳定。 - 别用
index作为key，和没写基本上没区别，因为不管你数组的顺序怎么颠倒，index 都是0, 1, 2这样排列，导致 Vue 会复用错误的旧子节点，做很多额外的工作。 - 千万别用随机数作为
key，不然旧节点会被全部删掉，新节点重新创建。 - 不要用时间戳作为
key，他无法保证唯一的key
