17.说说为什么要在列表组件中写 key，其作用是什么？

一、Key是什么

开始之前，我们先还原两个实际工作场景

1. 当我们在使用v-for时，需要给单元加上key

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

1. 用+new Date()生成的时间戳作为key，手动强制触发重新渲染

<Comp :key="+new Date()" />

那么这背后的逻辑是什么，key的作用又是什么？

一句话来讲

key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点

场景背后的逻辑

场景1: 当我们在使用v-for时，需要给单元加上key

• 如果不用key，Vue会采用就地复地原则：最小化element的移动，并且会尝试尽最大程度在同适当的地方对相同类型的element，做patch或者reuse。

• 如果使用了key，Vue会根据keys的顺序记录element，曾经拥有了key的element如果不再出现的话，会被直接remove或者destoryed

场景2: 用+new Date()生成的时间戳作为key，手动强制触发重新渲染

• 当拥有新值的rerender作为key时，拥有了新key的Comp出现了，那么旧key Comp会被移除，新key Comp触发渲染

二、设置key与不设置key区别

举个例子：

创建一个实例，2秒后往items<