Vue中的key

【key 是为 Vue 中 虚拟节点 的唯一标记，通过这个 key，diff 操作可以更准确、更快速】

（1）第一种情况是 v-if 中使用 key。

• 由于 Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。

• 因此当使用 v-if 来实现元素切换的时候，如果切换前后含有相同类型的元素，那么这个元素就会被复用。

• 如果是相同的 input 元素，那么切换前后用户的输入不会被清除掉，这样是不符合需求的。

• 因此可以通过使用 key 来唯一的标识一个元素，这个情况下，使用 key 的元素不会被复用。

• 这个时候 key 的作用是用来标识一个独立的元素。

（2）第二种情况是 v-for 中使用 key。

• 用 v-for 更新已渲染过的元素列表时，它默认使用“就地复用”的策略。

• 数据项的顺序发生了改变，Vue 不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处的每个元素。

• 因此通过为每个列表项提供一个 key 值，来以便 Vue 跟踪元素的身份，从而高效的实现复用。

• 这个时候 key 的作用是为了高效的更新渲染虚拟 DOM。

为什么不建议用index作为key?

使用index 作为 key和没写基本上没区别，因为不管数组的顺序怎么颠倒，index 都是 0, 1, 2...这样排列

导致 Vue会复用错误的旧子节点，做很多额外的工作。