v-for中的key值的作用

我们都知道,vue很大的一个特点就是双向数据绑定,数据一旦改变,那么页面就会渲染新的数据呈现在页面上
对于v-for渲染的列表数据来说,数据量可能一般很庞大,而且我们经常还要对这个数据进行一些增删改操作
假设我们给列表增加一条数据,整个列表都要重新渲染一遍,那不就很费事吗,而key的出现就是尽可能的回避了这个问题,提高效率,如果我们给列表增加一条数据,页面只渲染了这个数据,那不就很完美了
v-for默认使用就地复用策略,列表数据修改的时候,他会根据可以值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素

上面这种情况我们使用了 index 作为了 key 。

1.在数组后面追加一条数据

此时前三条数据页面不会重新渲染，直接复用之前的，只会新渲染最后一条数据，此时用 index 作为 key ，没有任何问题。

2.在数组中间插入一条数据

页面在去渲染数据的时候，通过 index 定义的 key 的比较，会有：

之前的数据 之后的数据

key: 0 index: 0 num: 1 key: 0 index: 0 num: 1

key: 1 index: 1 num: 2 key: 1 index: 1 num: ‘新增加的数据4’

key: 2 index: 2 num: 3 key: 2 index: 2 num: 2

key: 3 index: 3 num: 3

通过上面清晰的对比，发现除了第一个数据可以复用之前的之外，另外三条数据都需要重新渲染。
最好的办法是使用数组中不会变化的那一项作为 key 值，对应到项目中，即每条数据都有一个唯一的 id ，来标识这条数据的唯一性。

总结:

key 用于识别唯一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们通过回收 DOM 中当前所有的元素来帮助 Vue 优化渲染。这些 key 必须是唯一的数字或字符串，Vue 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能。

方便查找删除虚拟DOM 节点