今天被面试问 v-for 渲染时 key 值的问题

[Hario]

我说 key 值我都会选用 id 或者图片的 src，一般不用 index 。

面试官问如果没有 id，没有 src 呢，或者两个图片的 src 相同，或者 value 值相同，那应该选什么。

怎么回答啊，应届菜鸡只会用 id，拿到的数据都有 id，也没碰见过同样 src 的情况，难倒我了。

[noe132]

key 是区分元素是否相同的依据。
一般来说，无状态的元素 props 值相同就是相同。此时 key 用 id 用 index 或者不用得到的表现相同，区别只是渲染时有些性能的差异。
有状态的元素包含自己的状态，而 vue 并不知道子元素状态，此时需要用 key 区分。
因为 vdom 渲染出来最后是和上次的 vdom 做 diff 的，如果 diff 出来只有 props 变化，那么就只会修改 props 。

举个例子，比如你交换了 a[0] a[1]，他们都有自己的状态，而他们的 props 没有区别，那么 vue 就根本不会修改元素。但如果你给他们都设置了 id key，那么 vue 知道第一次渲染的 vdom 和 第二次 的 vdom key 发生了变化，从而会交换元素，即使其他属性根本没有发生变化

[9ki]

记得 vDom 源码里 key 的对比就是 key1 === key2 （当然还有别的，具体翻源码吧）， 一般用一个唯一值即可，例如 id，实在没有，可以为数据上附加一个唯一 id

[murmur]

如果不允许用 id 的话，vue 的 key 的话可以用长随机串，或者干脆不写，vue 的编码规范只是自定义组件必须要 key，常规 html 元素不需要
我相信 vue 的性能，能给我优化好，现在的手机电脑这么牛逼百十来个元素没 key 也无所谓

[randyo]

可以定义一个自增键

[loading]

index+src

[rain0002009]

什么后端这么好 每个数组都有 id
这么久了 我遇到的后端只有 id 有其他用途的时候 才给我返回 id
其他 乱七八糟 我不要的数据倒是返回一堆

[Track13]

要不试试时间戳。。