vue中key的理解

Key是什么

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

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

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

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

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

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

场景背后的逻辑

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

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

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

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

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

就地复用的工作原理

当 Vue 更新列表时，它会尝试复用已有的 DOM 元素，而不是销毁并重新创建它们。具体来说：

Vue 会通过 key 属性来跟踪每个元素的身份。 如果列表的顺序或内容发生变化，Vue 会尽量复用已有的 DOM元素，只更新它们的内容或顺序。
如果没有提供 key，Vue 会默认使用就地复用策略，即通过元素的索引来判断是否需要更新。

就地复用的问题

如果没有正确使用 key，可能会导致以下问题：

状态错乱：如果列表项有内部状态（如输入框的值），复用可能导致状态被错误地保留。 渲染错误：如果列表项的顺序发生变化，Vue
可能会错误地复用元素，导致渲染结果不符合预期。